跳到主要内容

VISALL 正负双指标求和条形图 (Positive and Negative Double Indicator Sum Bar) 使用文档

简介​

正负双指标求和条形图是VISALL数据可视化库中的特色图表类型，用于同时展示两个相关指标及其总和的水平条形图。该图表特别适合展示正负对比数据，例如收入与支出、利润与亏损等场景，能够直观地展示两个指标的相对大小及其总体影响。

基本用法​

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

// 创建正负双指标求和条形图
const chart = render(container, {
  layers: [
    {
      type: 'positiveAndNegativeDoubleIndicatorSumBar',
      dataIndex: 0,
      encoding: {
        x: '部门', // 分类字段名
        y: '收入',  // 第一个指标（正值）
        y2: '支出'  // 第二个指标（会被转为负值展示）
      }
    }
  ],
  data: [
    {
      values: [
        { 部门: '销售部', 收入: 1200, 支出: 800 },
        { 部门: '研发部', 收入: 900, 支出: 1100 },
        { 部门: '市场部', 收入: 700, 支出: 500 },
        // ...更多数据
      ]
    }
  ]
});

配置参数​

参数类型默认值说明
encoding.xstring-分类字段映射，必须提供一个字符串或日期类型字段
encoding.ystring-第一个指标字段（正值展示），必须是数值类型
encoding.y2string-第二个指标字段（会被转为负值展示），必须是数值类型
dataIndexnumber0指定使用的数据集索引

数据要求​

  • x字段要求为字符串或日期类型，用于分类
  • y和y2字段要求为数值类型
  • 数据量建议不少于2条才能体现对比效果
  • 提供准确的字段名映射

数据处理机制​

本图表对原始数据进行了特殊处理：

  1. y字段数据保持原值（通常为正值）
  2. y2字段数据会被自动转为负值（通过 -dataItem[y2] 计算）
  3. 同时计算两个指标的总和值（+dataItem[y] + -dataItem[y2]）

渲染规则​

  1. 三个系列：

    • 第一个系列显示总和值（y + (-y2)）
    • 第二个系列显示y值（堆叠展示）
    • 第三个系列显示-y2值（堆叠展示）

  2. 标签显示：

    • 当条形宽度足够时（barWidth >= 15px），自动显示数值标签
    • 正值在左侧显示，负值在右侧显示

  3. 滚动条：

    • 当数据量较大导致条形宽度不足时，自动显示垂直滚动条
    • 默认显示最后的8个数据点

潜规则与注意事项​

  1. 自适应条形宽度：

    • 条形宽度计算公式：(容器高度 - 边距) / 数据点数 / 2
    • 存在最大宽度限制：util.const.BAR_MAX_WIDTH

  2. 单位显示规则：

    • 自动读取并显示字段单位信息
    • 单位会显示在坐标轴名称和数值标签中
    • 单位通过dataMetaInfo[字段名].unit获取

  3. 标签智能显示：

    • 只有当条形宽度足够大时（barWidth >= 15px）才会显示标签
    • 标签位置会根据值的正负自动调整

  4. 垂直滚动机制：

    • 当条形宽度过小时，自动启用垂直滚动
    • 滚动条样式会根据主题自动调整

  5. 坐标轴反转：

    • 本图表是水平条形图，x轴对应y轴位置，y/y2对应x轴位置
    • x轴字段名会显示在y轴左侧

实现原理​

正负双指标求和条形图内部实现主要包括以下几个步骤：

  1. 数据预处理：对x字段数据进行去重和排序
  2. 布局计算：根据容器尺寸计算条形宽度和滚动条显示逻辑
  3. 数据转换：将y2数据转换为负值，计算总和值
  4. 渲染配置：根据数据特性配置三个系列的显示规则

使用场景示例​

财务收支分析​

{
  type: 'positiveAndNegativeDoubleIndicatorSumBar',
  encoding: {
    x: '月份',
    y: '收入',
    y2: '支出'
  }
}

业务盈亏对比​

{
  type: 'positiveAndNegativeDoubleIndicatorSumBar',
  encoding: {
    x: '产品线',
    y: '利润',
    y2: '亏损'
  }
}

人口增减变化​

{
  type: 'positiveAndNegativeDoubleIndicatorSumBar',
  encoding: {
    x: '年份',
    y: '出生人口',
    y2: '死亡人口'
  }
}

常见问题解决​

  1. 条形图显示不全

    • 检查容器高度是否足够
    • 数据量过大时会自动启用滚动条

  2. 负值显示问题

    • y2字段数据会自动转为负值，原始数据应为正值
    • 如需手动控制正负，可以交换y和y2的字段映射

  3. 标签显示不全

    • 当容器高度不足时，标签可能会被隐藏
    • 可以通过增加容器高度或减少数据点数量来解决

  4. 数据排序问题

    • x轴数据默认按升序排列
    • 如需特定排序，建议在数据预处理阶段完成
编辑此页
最后由 gongyuzhouchang 于 更新