跳到主要内容

VISALL K线图叠加动态折线 (Candlestick Chart And Dynamic Line) 使用文档

简介​

K线图叠加动态折线是VISALL数据可视化库中的专业图表类型，主要用于展示股票行情数据与相关指标的动态变化。该组件支持K线图与多条动态折线的叠加展示，并提供了时间轴控制功能，可以动态展示数据变化过程。

基本用法​

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

// 创建K线图叠加动态折线
const chart = render(container, {
  layers: [
    {
      type: 'hxKLineAndDynamicLine',
      dataIndex: 0,
      encoding: {
        x: '日期', // X轴字段名
        y: ['成交量', '换手率'] // Y轴字段名
      },
      stocks: [
        {
          code: '300037',
          market: '33',
          name: '新宙邦'
        }
      ]
    }
  ],
  data: [
    {
      values: [
        { 日期: '2024-01-01', 成交量: 1000, 换手率: 2.5 },
        { 日期: '2024-01-02', 成交量: 1200, 换手率: 3.0 },
        // ...更多数据
      ]
    }
  ]
});

配置参数​

参数类型默认值说明
encoding.xstring-X轴映射字段，必须为日期类型字段
encoding.ystring[]-Y轴映射字段，支持多个字段，必须是数值类型
dataIndexnumber0指定使用的数据集索引
stocksStockData[]-股票数据配置，包含股票代码、市场信息和名称

StockData 类型定义​

interface StockData {
  code: string;    // 股票代码
  market: string;  // 市场代码（如：SZ、SH等）
  name: string;   // 股票名称
}

数据要求​

  • X轴字段要求为日期类型
  • Y轴字段要求为数值类型
  • 数据量至少需要大于1条
  • 提供准确的字段名映射
  • 股票数据必须包含有效的代码、市场信息和名称

高级用法​

1. 多指标叠加​

可以同时展示多个技术指标：

{
  type: 'hxKLineAndDynamicLine',
  encoding: {
    x: '日期',
    y: ['成交量', '换手率', 'MACD', 'KDJ']
  },
  stocks: [
    {
      code: '300033',
      market: '33',
      name: '同花顺'
    }
  ]
}

潜规则与注意事项​

  1. 数据排序机制：

    • 组件默认会对X轴数据进行升序排序
    • 排序通过utils.dataTransform.transform实现
    • 同时会进行数据去重处理

  2. Y轴自适应：

    • 左侧Y轴会根据所有折线数据的范围自动计算刻度
    • 右侧Y轴固定显示股价信息
    • Y轴刻度数量默认为5个

  3. 时间轴显示规则：

    • 在非小屏模式下显示完整时间轴
    • 在小屏模式下显示下拉选择器
    • 时间轴支持动画播放功能

  4. 图例交互限制：

    • 折线图例不支持点击切换显示/隐藏
    • K线图例支持切换不同股票

  5. Tooltip显示规则：

    • K线图Tooltip显示股票交易信息
    • 折线图Tooltip显示对应指标数据
    • 小屏模式下Tooltip最多显示3个字段

  6. 数据同步机制：

    • K线图与折线图数据通过时间戳进行同步
    • 动画播放时保持数据同步更新

实现原理​

组件内部实现了复杂的数据处理逻辑，主要包括以下步骤：

  1. 数据预处理：排序、去重和类型转换
  2. 数据编码：将原始数据映射到视觉通道
  3. K线图初始化：配置HXKline图表实例
  4. 折线图渲染：根据数据范围计算Y轴比例
  5. 时间轴控制：实现数据动画播放功能

类型兼容性问题​

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

  1. 股票数据必须包含正确的市场代码
  2. 日期数据必须为有效的日期格式
  3. 数值数据必须为有效的数字类型

示例​

基础K线图叠加成交量​

{
  type: 'hxKLineAndDynamicLine',
  encoding: {
    x: '日期',
    y: ['成交量']
  },
  stocks: [
    {
      code: '300033',
      market: '33',
      name: '同花顺'
    }
  ]
}

多指标叠加展示​

{
  type: 'hxKLineAndDynamicLine',
  encoding: {
    x: '日期',
    y: ['成交量', '换手率', 'MACD']
  },
  stocks: [
    {
      code: '300033',
      market: '33',
      name: '同花顺'
    }
  ]
}

常见问题解决​

  1. K线图显示异常

    • 检查股票代码和市场代码是否正确
    • 确认数据时间范围是否有效

  2. 折线图数据不同步

    • 检查X轴数据是否为有效的日期格式
    • 确认数据是否按时间正确排序

  3. 时间轴控制失效

    • 检查时间轴配置是否正确
    • 确认数据量是否足够

  4. 性能优化建议

    • 控制数据量在合理范围内
    • 避免同时展示过多指标
    • 适当调整动画间隔时间
编辑此页
最后由 gongyuzhouchang 于 更新