VISALL 动态排名折线图 (Dynamic Ranking Line) 使用文档

简介

动态排名折线图是VISALL数据可视化库中的专用图表类型，用于展示数据排名随时间的动态变化。该组件能够生动地展示各分类数据在不同时间点的排名变化情况，并支持时间轴动画效果，使排名变化过程更加直观可视。

基本用法

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

// 创建动态排名折线图
const chart = render(container, {
  layers: [
    {
      type: 'dynamicRankingLine',
      dataIndex: 0,
      encoding: {
        x: '日期', // X轴时间字段名
        y: '销售额', // Y轴数值字段名（用于排序）
        z: '产品名称' // 分类字段名
      }
    }
  ],
  data: [
    {
      values: [
        { 日期: '2023-01-01', 产品名称: 'A产品', 销售额: 320 },
        { 日期: '2023-01-01', 产品名称: 'B产品', 销售额: 120 },
        { 日期: '2023-01-01', 产品名称: 'C产品', 销售额: 220 },
        { 日期: '2023-01-02', 产品名称: 'A产品', 销售额: 280 },
        { 日期: '2023-01-02', 产品名称: 'B产品', 销售额: 350 },
        { 日期: '2023-01-02', 产品名称: 'C产品', 销售额: 190 },
        // ...更多数据
      ]
    }
  ]
});

配置参数

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

数据要求

• x轴字段要求为日期类型
• y轴字段要求为数值类型（用于排序）
• z轴字段要求为字符串类型（用于分类）
• 数据条数需大于1

高级用法

1. 时间轴控制

动态排名折线图内置时间轴控制组件，支持手动或自动播放排名变化：

{
  type: 'dynamicRankingLine',
  encoding: {
    x: '季度', 
    y: '市场份额',
    z: '品牌'
  }
}
// 渲染后可通过时间轴控件控制数据展示

潜规则与注意事项

1. 时间轴排序机制：

   • 动态排名折线图会自动对X轴日期数据进行升序排序和去重。
   • 排序通过transforms: [{ type: 'deDuplication' }, { type: 'sort', order: 'ascending' }]实现。

2. 排名计算规则：

   • 每个时间点，系统会根据y字段值对所有分类数据进行降序排序，值越大排名越靠前。
   • 排名从1开始，相同值会获得相同排名。

3. 视图范围控制：

   • 默认显示最多5个时间点的数据变化。
   • 时间轴滑动时，视图会自动调整显示范围。

4. 动画效果：

   • 排名变化时会有平滑的动画过渡效果，默认动画持续时间为1000毫秒。
   • 动画通过animationDurationUpdate和animationDuration属性控制。

5. 折线特性：

   • 使用自定义的dvRankLine类型绘制折线。
   • 提供线条高亮效果，鼠标悬停时会突出显示相应折线。

6. 单位显示规则：

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

实现原理

动态排名折线图内部实现了复杂的数据处理和动态排名计算：

1. 数据预处理：对X轴日期数据进行排序和去重
2. 系列提取：从z字段中提取所有唯一分类值作为系列
3. 排名计算：对每个时间点的数据按y字段值进行降序排序，计算排名
4. 数据重组：将排名结果重组为适合绘制折线图的数据结构
5. 动画控制：通过时间轴控制组件实现动态排名变化的动画效果

类型兼容性问题

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

1. X轴日期字段必须是有效的日期格式
2. Y轴数值必须是有效的数字类型或可转换为数字的字符串
3. Z轴分类字段需要是字符串类型
4. 确保所有时间点都有完整的分类数据，避免数据缺失导致排名计算错误

示例

基础动态排名折线图

{
  type: 'dynamicRankingLine',
  encoding: {
    x: '日期',
    y: '销售额',
    z: '产品'
  }
}

股票市值排名变化图

{
  type: 'dynamicRankingLine',
  encoding: {
    x: '交易日期',
    y: '市值',
    z: '股票代码'
  }
}

学生成绩排名变化图

{
  type: 'dynamicRankingLine',
  encoding: {
    x: '考试日期',
    y: '分数',
    z: '学生姓名'
  }
}

常见问题解决

1. 排名线条不显示

   • 检查z字段分类值是否正确
   • 确保每个时间点的所有分类数据都存在

2. 排名计算错误

   • 检查y字段值是否为有效数值
   • 确认排序方向是否符合预期（默认是y值越大排名越靠前）

3. 动画效果不流畅

   • 减少数据量或增加动画持续时间
   • 检查浏览器性能和硬件加速设置

4. 时间轴控制失效

   • 确保x字段是有效的日期格式
   • 检查时间点数量是否足够（至少3个时间点）