跳到主要内容

VISALL K线图叠加多指标折线 (HXKLine And Multi-Indicator Line) 使用文档

简介​

K线图叠加多指标折线组件是VISALL数据可视化库中的专业金融图表组件，支持在K线图基础上叠加多个指标折线图，方便用户进行多指标联合分析。该组件基于同花顺K线图实现，提供了同步的数据显示、交互和缩放功能。

基本用法​

import { render } from 'path/to/bundle.esm.min.js';

// 创建K线图叠加多指标折线
const chart = render(container, {
  layers: [
    {
      type: 'hxKLineAndMultiIndicatorLine',
      dataIndex: 0,
      encoding: {
        x: 'date',       // X轴日期字段
        y: ['指标1', '指标2'] // Y轴指标字段
      },
      stocks: [
        {
          code: '000001', // 股票代码
          market: 'SZ',   // 市场代码
          name: '平安银行'  // 股票名称
        }
      ]
    }
  ],
  data: [
    {
      values: [
        { date: '2023-01-01', 指标1: 100, 指标2: 150 },
        { date: '2023-01-02', 指标1: 120, 指标2: 140 },
        // ...更多数据
      ]
    }
  ]
});

配置参数​

参数类型默认值说明
encoding.xstring-X轴映射字段，必须提供一个日期类型字段
encoding.ystring[]-Y轴映射字段数组，指定要显示的指标，必须是数值类型
dataIndexnumber0指定使用的数据集索引
stocksStockData[]-股票数据数组，每个元素包含股票的基本信息
StockData.codestring-股票代码
StockData.marketstring-市场代码（如：SZ-深市，SH-沪市）
StockData.namestring-股票名称

数据要求​

  • X轴字段必须是日期类型
  • Y轴字段必须是数值类型
  • 股票代码必须符合交易所规范
  • 市场代码必须是有效的交易所代码
  • 数据量至少需要大于1条
  • 提供准确的字段名映射

高级用法​

1. 多指标显示​

当需要展示多个指标进行对比分析时：

{
  type: 'hxKLineAndMultiIndicatorLine',
  encoding: {
    x: 'date',
    y: ['成交量', '持仓量', '换手率']
  },
  stocks: [...]
}

2. 多股票切换​

支持在同一个图表中切换显示不同的股票：

{
  type: 'hxKLineAndMultiIndicatorLine',
  encoding: {
    x: 'date',
    y: ['指标1', '指标2']
  },
  stocks: [
    {
      code: '000001',
      market: 'SZ',
      name: '平安银行'
    },
    {
      code: '600000',
      market: 'SH',
      name: '浦发银行'
    }
  ]
}

潜规则与注意事项​

  1. 数据加载机制：

    • K线图组件会自动从同花顺数据源加载数据
    • 折线图数据需要用户自行提供
    • 两种数据的日期范围必须匹配

  2. 折线图渲染规则：

    • 当有多个Y轴字段时，系统会自动选择数据范围最大的字段作为主Y轴
    • 左侧Y轴显示指标数据，右侧Y轴显示股价数据
    • 折线图颜色自动从颜色列表中分配

  3. 图表交互限制：

    • 默认禁用了缩放功能（setZoomEnabled: false）
    • 默认禁用了滚动功能（setScrollEnabled: false）
    • 使用DataZoom控制显示范围

  4. DataZoom智能显示：

    • 使用自定义DataZoom控制K线和折线的同步显示
    • 拖动DataZoom时，K线和折线会同步更新

  5. Tooltip显示规则：

    • K线tooltip和折线tooltip分别显示
    • K线tooltip显示股票行情信息
    • 折线tooltip显示指标数据信息

  6. 样式定制规则：

    • 支持通过token.dvHXKLine.hxKLineAndMultiIndicatorLine.option进行样式定制
    • 边框颜色可通过token.dvHXKLine.constants.DEFAULT_TICK_LINE_COLOR配置（可参考此连接）
    • 字体颜色可通过token.dvHXKLine.constants.DEFAULT_FONT_COLOR配置（可参考此连接）

实现原理​

K线图叠加多指标折线组件内部使用了复杂的数据处理逻辑，主要包括以下步骤：

  1. 数据预处理：排序、去重和日期处理
  2. 数据编码：将原始数据映射到视觉通道
  3. K线图渲染：初始化K线图并加载股票数据
  4. 折线图渲染：根据指标数据渲染折线图
  5. 缩放联动：实现K线图和折线图的同步缩放
  6. 自适应计算：根据数据范围调整Y轴比例

类型兼容性问题​

使用本组件时，需要注意以下类型兼容性问题：

  1. 日期字段需要是有效的日期格式
  2. 指标数据字段必须是数值类型
  3. 股票数据类型需要符合StockData接口定义
  4. 市场代码必须是预定义的常量值

示例​

基础K线图叠加双指标折线​

{
  type: 'hxKLineAndMultiIndicatorLine',
  encoding: {
    x: 'date',
    y: ['成交量', '换手率']
  },
  stocks: [
    {
      code: '000001',
      market: 'SZ',
      name: '平安银行'
    }
  ]
}

多指标分析​

{
  type: 'hxKLineAndMultiIndicatorLine',
  encoding: {
    x: 'date',
    y: ['成交量', '持仓量', 'MACD', 'KDJ']
  },
  stocks: [
    {
      code: '600000',
      market: 'SH',
      name: '浦发银行'
    }
  ]
}

常见问题解决​

  1. 数据加载失败

    • 检查股票代码和市场代码是否正确
    • 确认是否有正确的数据访问权限
    • 检查日期字段格式是否正确

  2. 图表显示异常

    • 检查容器大小是否合适
    • 确认数据是否完整
    • 验证指标数据范围是否合理

  3. 指标不显示

    • 检查指标字段名是否正确
    • 确认数据中是否包含指标数据
    • 验证数据类型是否为数值

  4. 联动失效

    • 检查DataZoom配置是否正确
    • 确认事件监听是否正确
编辑此页
最后由 gongyuzhouchang 于 更新