VISALL 排名折线图 (Ranking Line Chart) 使用文档

简介

排名折线图是VISALL数据可视化库中的一种特殊图表类型，专门用于展示多个数据系列在不同时间点上的排名变化趋势。该图表能够直观地展示各个对象在时间维度上的排名起伏，非常适合用于展示竞争格局的动态变化、业绩排名的波动等场景。

基本用法

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

// 创建排名折线图
const chart = render(container, {
  layers: [
    {
      type: 'rankingLine',
      dataIndex: 0,
      encoding: {
        x: '日期', // X轴字段名（时间维度）
        y: '数值', // Y轴字段名（用于排名的数值）
        z: '类别'  // 分类字段名（不同的线）
      }
    }
  ],
  data: [
    {
      values: [
        { 日期: '2023-01', 数值: 320, 类别: 'A产品' },
        { 日期: '2023-01', 数值: 120, 类别: 'B产品' },
        { 日期: '2023-01', 数值: 220, 类别: 'C产品' },
        { 日期: '2023-02', 数值: 290, 类别: 'A产品' },
        { 日期: '2023-02', 数值: 220, 类别: 'B产品' },
        { 日期: '2023-02', 数值: 190, 类别: 'C产品' },
        // ...更多数据
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	X轴映射字段，必须提供一个时间/日期类型字段
encoding.y	string	-	Y轴映射字段，必须是数值类型，用于计算排名
encoding.z	string	-	分类字段，用于区分不同的数据系列
dataIndex	number	0	指定使用的数据集索引

数据要求

X轴字段要求为日期或字符串类型，表示时间维度
Y轴字段要求为数值类型，用于确定排名
Z轴字段要求为字符串类型，用于分类
X轴数据点数量应大于2
Y轴数据必须存在
Z轴分类必须存在
数据量至少需要大于1条

工作原理

排名折线图通过以下步骤工作：

按时间维度（X轴）对数据进行排序
在每个时间点，根据数值（Y轴）对所有分类（Z轴）进行排名计算
将排名结果映射到Y轴坐标，并使用折线连接相同分类的不同时间点
排名值越小，位置越靠上（排名第1显示在最上方）

高级用法

动态排名变化展示

排名折线图特别适合展示一段时间内的动态排名变化：

{
  type: 'rankingLine',
  encoding: {
    x: '季度',
    y: '销售额',
    z: '产品类别'
  }
}

此配置将展示不同产品类别在各个季度的销售额排名变化。

潜规则与注意事项

排名计算机制：
- 排名是基于Y字段的数值大小，数值越大排名越靠前（排名值越小）
- 排名计算公式：在每个X轴时间点，根据Y值降序排列所有Z分类，索引+1即为排名
- 代码实现：columns.sort((a, b) => Number(b.__origin[y]) - Number(a.__origin[y]));
数据排序机制：
- X轴数据默认按照升序排序，确保时间线的正确展示
- 排序通过util.dataTransform.transform(data, [{ type: 'sort', field: x, order: 'ascending' }])实现
时间轴显示：
- X轴标签会自动对齐边缘，通过dvAlignEdge: true属性实现
- 当X轴数据较多时，会自动优化标签显示，避免重叠
单位显示规则：
- 如果数据中包含单位信息，会自动在X轴名称上显示单位
- 单位信息通过dataMetaInfo[x]?.unit获取，并以(单位)形式附加到轴名称
提示框定制：
- 提示框显示当前时间点的排名情况
- 包含分类名称、颜色、排名值等信息
Y轴显示：
- Y轴显示排名数字（1、2、3...）
- Y轴反转显示，排名第1显示在最上方

实现原理

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

数据预处理：按时间维度排序、去重
多系列数据分组：根据分类字段将数据分组
排名计算：在每个时间点计算不同系列的排名
数据映射：将排名数据映射到视觉元素

类型兼容性问题

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

X轴必须是可排序的时间/日期类型或字符串类型
Y轴必须是可比较的数值类型
Z轴必须是分类字符串类型

示例

产品销售排名变化

{
  type: 'rankingLine',
  encoding: {
    x: '月份',
    y: '销售额',
    z: '产品名称'
  }
}

国家GDP排名变化

{
  type: 'rankingLine',
  encoding: {
    x: '年份',
    y: 'GDP',
    z: '国家'
  }
}

球员得分排名变化

{
  type: 'rankingLine',
  encoding: {
    x: '赛季',
    y: '得分',
    z: '球员'
  }
}

常见问题解决

排名线显示不全
- 检查容器大小是否足够
- 检查时间点是否过多，考虑筛选关键时间点
排名计算错误
- 确保Y轴字段为数值类型
- 检查数据中是否存在缺失值
分类显示混乱
- 确保Z轴字段正确设置
- 检查是否存在重复的分类值
时间轴显示问题
- 确保X轴字段为时间类型或可排序的字符串
- 检查时间格式是否一致

简介​

基本用法​

配置参数​

数据要求​

工作原理​

高级用法​

动态排名变化展示​

潜规则与注意事项​

实现原理​

类型兼容性问题​

示例​

产品销售排名变化​

国家GDP排名变化​

球员得分排名变化​

常见问题解决​

简介