VISALL 排名条形图 (Ranking Horizontal Bar) 使用文档
简介
排名条形图是VISALL数据可视化库中的一种专用图表类型，用于展示数据的排名情况。它以水平条形图的形式直观展示各类别数据的大小排名，并为前三名添加特殊标识，适用于展示销售排名、业绩对比、得分排行等场景。
基本用法
import { render } from 'path/to/bundle.esm.min.js';
// 创建排名条形图
const chart = render(container, {
layers: [
{
type: 'rankingHorizontalBar',
dataIndex: 0,
encoding: {
x: '销售额', // 数值字段名（用于排名依据）
y: '产品名称' // 类别字段名（用于标识每个条形）
}
}
],
data: [
{
values: [
{ 产品名称: 'A产品', 销售额: 320 },
{ 产品名称: 'B产品', 销售额: 120 },
{ 产品名称: 'C产品', 销售额: 220 },
{ 产品名称: 'D产品', 销售额: 180 },
{ 产品名称: 'E产品', 销售额: 280 },
// ...更多数据
]
}
]
});
配置参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| encoding.x | string | - | 数值字段，用于条形图长度的表示和排名依据，必须是数值类型 |
| encoding.y | string | - | 类别字段，用于标识每个条形，通常是字符串类型 |
| dataIndex | number | 0 | 指定使用的数据集索引 |
数据要求
- X轴字段要求为数值类型（表示排名的依据）
- Y轴字段要求为字符串类型（表示排名的对象）
- X轴数据数量需大于1
- Y轴数据数量需大于3
- 数据条数需大于1
潜规则与注意事项
-
动画效果：
- 排名条形图有固定的动画更新频率，默认为1200毫秒。
- 实现代码中的设置：
const updateFrequency = 1200;
-
排名标识：
- 前三名会使用特殊颜色标识（第一名为红色，第二名为橙色，第三名为黄色）。
- 标识通过富文本实现：
{rank${index > 2 ? '' : index + 1}|${index + 1}}
-
自适应显示：
- 图表会根据容器高度自动计算能够显示的最大条形数量。
- 计算公式：
const yMaxNum = Math.floor((chartViewRect.height - grid.top - grid.bottom) / 15);
-
条形标签：
- 每个条形的右侧会显示对应的数值，并自动格式化单位。
- 标签通过
hook.formatDataNumberValue格式化。
-
名称显示：
- Y轴标签会显示在条形内侧，并与排名数字一起展示。
- 标签使用富文本格式：
{rank${index > 2 ? '' : index + 1}|${index + 1}} {name|${value}}
-
单位显示：
- 如果数据中包含单位信息，会自动在坐标轴名称和提示框中显示单位。
- 单位信息通过
dataMetaInfo[字段名].unit获取。
实现原理
排名条形图组件内部使用了复杂的数据处理逻辑，主要包括以下步骤：
- 数据预处理：提取唯一的名称列表
- 图表配置：设置水平条形图的基本属性
- 排名处理：根据数值大小对条形进行排序
- 视觉编码：前三名使用特殊颜色标记
- 标签处理：在条形内侧显示排名和名称，在右侧显示数值
- 自适应计算：根据容器高度计算最大显示条目数
示例
基础排名条形图
{
type: 'rankingHorizontalBar',
encoding: {
x: '销售额',
y: '产品名称'
}
}
常见问题解决
-
部分数据未显示
- 检查容器高度是否足够
- 容器高度限制了可显示的最大条目数
- 增加容器高度可显示更多排名项
-
排名不符合预期
- 检查X轴数值是否正确
- 确保X轴为数值类型
-
显示单位问题
- 确保在数据元信息中正确设置了单位信息
- 单位会自动附加在数值后面