VISALL 正负双指标对比折线图 (Positive and Negative Double Indicator Comparison Line) 使用文档

简介

正负双指标对比折线图是VISALL数据可视化库中的一种特殊图表类型，用于对比两个指标在同一X轴上的变化趋势。该图表将画布分为上下两部分，上部展示第一个指标，下部展示第二个指标（以倒置方式呈现），便于直观对比两个指标的变化关系。

基本用法

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

// 创建正负双指标对比折线图
const chart = render(container, {
  layers: [
    {
      type: 'positiveAndNegativeDoubleIndicatorComparisonLine',
      dataIndex: 0,
      encoding: {
        x: '月份',   // X轴字段名
        y: '销售额', // 第一个指标（上部图表）
        y2: '利润'   // 第二个指标（下部图表）
      }
    }
  ],
  data: [
    {
      values: [
        { 月份: '1月', 销售额: 320, 利润: 120 },
        { 月份: '2月', 销售额: 120, 利润: 80 },
        { 月份: '3月', 销售额: 220, 利润: 100 },
        // ...更多数据
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	X轴映射字段，必须提供一个字符串或日期类型字段
encoding.y	string	-	第一个指标（上部图表）的Y轴映射字段，必须是数值类型
encoding.y2	string	-	第二个指标（下部图表）的Y轴映射字段，必须是数值类型
dataIndex	number	0	指定使用的数据集索引

数据要求

X轴字段要求为字符串或日期类型
Y轴字段（两个指标）要求为数值类型
数据量至少需要大于1条
提供准确的字段名映射

高级用法

数据筛选与排序

图表内部会自动对X轴数据进行升序排序，并移除重复项：

// 数据会自动进行排序和去重处理
const transformData = util.dataTransform.transform(data.values.slice(), [
  { type: 'sort', field: x, order: 'ascending' },
  { type: 'deDuplication', field: x }
]);

日期格式处理

当X轴为日期类型时，图表会自动识别并进行格式化处理：

{
  type: 'positiveAndNegativeDoubleIndicatorComparisonLine',
  encoding: {
    x: '日期',        // 日期类型字段
    y: '活跃用户数',
    y2: '新增用户数'
  }
}

潜规则与注意事项

双区域布局机制：
- 图表会自动将画布分为上下两个网格区域，每个区域高度相等
- 上部网格展示第一个指标（y字段）
- 下部网格展示第二个指标（y2字段），并进行Y轴翻转（inverse: true）
- 网格高度计算公式：gridHeight = (chartRect.height - heightOfSpaceOutsideGrid) / 2
DataZoom联动效果：
- 图表默认显示最后7个数据点
- 上下两个图表的缩放和平移操作会自动联动
- 实现代码中的联动设置：xAxisIndex: [0, 1]
数值单位自动处理：
- 图表会自动从数据元信息中获取单位并显示在坐标轴上
- 单位信息通过dataMetaInfo[字段名].unit获取
- Y轴数值会自动进行格式化（如千分位、单位缩写等）
轴线联动交互：
- 鼠标悬停时，上下图表的轴线会联动显示
- 通过axisPointer.link配置实现：link: [{ xAxisIndex: 'all' }]

实现原理

正负双指标对比折线图内部使用了以下关键技术：

双网格布局：将画布划分为上下两个等高的网格区域
Y轴翻转：下部图表使用inverse: true实现Y轴翻转
数据处理：自动排序和去重处理
联动交互：配置DataZoom和AxisPointer实现上下图表联动

类型兼容性问题

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

部分配置参数需要进行类型检查，避免undefined值导致错误
数据转换函数需要注意输入类型验证
Y轴格式化函数需要处理不同数值类型

示例

基础正负双指标对比折线图

{
  type: 'positiveAndNegativeDoubleIndicatorComparisonLine',
  encoding: {
    x: '季度',
    y: '收入',
    y2: '支出'
  }
}

带日期的正负双指标对比折线图

{
  type: 'positiveAndNegativeDoubleIndicatorComparisonLine',
  encoding: {
    x: '交易日期', // 日期格式
    y: '买入量',
    y2: '卖出量'
  }
}

常见问题解决

图表显示不全
- 检查容器高度是否足够，该图表需要较高的容器
- 建议容器高度至少为400px以上
数据不显示或显示异常
- 确保y和y2字段都是有效的数值类型
- 检查数据中是否包含null或undefined值
坐标轴单位显示问题
- 确保在数据元信息中正确设置了单位信息
- 单位格式：dataMetaInfo[字段名].unit = '单位名称'
自定义样式调整
- 可通过调整容器高度间接控制两个网格的高度
- 可通过主题定制修改折线的颜色和样式

简介​

基本用法​

配置参数​

数据要求​

高级用法​

数据筛选与排序​

日期格式处理​

潜规则与注意事项​

实现原理​

类型兼容性问题​

示例​

基础正负双指标对比折线图​

带日期的正负双指标对比折线图​

常见问题解决​

简介