跳到主要内容

VISALL K线叠加柱状图 (HXKLineAndBar) 使用文档

简介​

K线叠加柱状图组件是VISALL数据可视化库中的专业图表类型，主要用于展示股票行情数据与相关指标的叠加展示。该组件支持K线图与柱状图的联动展示，能够灵活处理时间序列数据，支持多指标数据的展示。

基本用法​

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

// 创建K线叠加柱状图
const chart = render(container, {
  layers: [
    {
      type: 'hxKLineAndBar',
      dataIndex: 0,
      encoding: {
        x: '日期', // X轴字段名
        y: '成交量' // Y轴字段名
      },
      stocks: [
        {
          code: '300037',
          market: '33',
          name: '新宙邦'
        }
      ]
    }
  ],
  data: [
    {
      values: [
        { 日期: '2024-01-01', 成交量: 320000 },
        { 日期: '2024-01-02', 成交量: 120000 },
        { 日期: '2024-01-03', 成交量: 220000 },
        // ...更多数据
      ]
    }
  ]
});

配置参数​

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

数据要求​

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

高级用法​

1. 多股票切换​

支持通过图例切换不同股票的K线数据：

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

2. 自定义样式​

可以通过 token 配置自定义样式：

{
  type: 'hxKLineAndBar',
  encoding: {
    x: '日期',
    y: '成交量'
  },
  stocks: [
    {
      code: '300033',
      market: '33',
      name: '同花顺'
    }
  ],
  token: {
    dvHXKLine: {
      hxKLineAndBar: {
        option: {
          yAxis: {
            tickText: {
              family: 'PingFang SC'
            }
          }
        }
      }
    }
  }
}

潜规则与注意事项​

  1. 数据时间范围限制：

    • K线数据的时间范围必须与柱状图数据的时间范围匹配
    • 系统会自动处理时间戳的转换和匹配

  2. 数据排序机制：

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

  3. 柱状图样式规则：

    • 柱状图默认使用半透明蓝色（rgba(85, 92, 247, 0.16)）
    • 高亮状态使用较深的蓝色（rgba(85, 92, 247, 0.35)）
    • 柱状图与K线图共享Y轴刻度

  4. DataZoom联动：

    • 柱状图与K线图共享数据缩放功能
    • 缩放时会同时更新两个图表的数据范围

  5. 单位显示规则：

    • 如果数据中包含单位信息，会自动在坐标轴名称和提示框中显示单位
    • 单位信息通过dataMetaInfo[字段名].unit获取

  6. Tooltip联动：

    • K线图和柱状图共享十字光标
    • 鼠标移动时会同时显示两个图表的数据

实现原理​

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

  1. 数据预处理：排序、去重和类型转换
  2. 数据编码：将原始数据映射到视觉通道
  3. K线数据适配：将柱状图数据与K线数据时间戳对齐
  4. 联动处理：实现K线图与柱状图的交互联动

类型兼容性问题​

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

  1. 股票代码和市场信息必须符合规范
  2. 时间戳格式必须统一
  3. 数值类型数据必须为数字

示例​

基础K线叠加柱状图​

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

多股票K线叠加柱状图​

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

常见问题解决​

  1. K线图显示异常

    • 检查股票代码和市场信息是否正确
    • 确认数据时间范围是否合适

  2. 柱状图数据不匹配

    • 检查X轴数据是否为日期类型
    • 确认数据时间范围是否与K线数据匹配

  3. 交互联动失效

    • 检查数据时间戳格式是否统一
    • 确认数据量是否足够

  4. 样式显示问题

    • 检查token配置是否正确
    • 确认主题配置是否完整
编辑此页
最后由 gongyuzhouchang 于 更新