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

简介

折线图组件是VISALL数据可视化库中的核心图表类型之一，主要用于展示数据随时间或其他连续维度的变化趋势。该组件支持常规折线图、堆叠折线图，能够灵活处理多维数据，并支持多系列数据的展示。

基本用法

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

// 创建折线图
const chart = render(container, {
  layers: [
    {
      type: 'line',
      dataIndex: 0,
      encoding: {
        x: '日期', // X轴字段名
        y: ['销售额'] // Y轴字段名
      }
    }
  ],
  data: [
    {
      values: [
        { 日期: '2023-01-01', 销售额: 320 },
        { 日期: '2023-01-02', 销售额: 120 },
        { 日期: '2023-01-03', 销售额: 220 },
        // ...更多数据
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	X轴映射字段，通常为日期或类别字段
encoding.y	string[]	-	Y轴映射字段，支持单个字段或多个字段，必须是数值类型
encoding.z	string	-	可选的第三维度分类字段，用于多系列数据
dataIndex	number	0	指定使用的数据集索引
dvStack	boolean	false	是否启用堆叠模式

数据要求

X轴字段要求为字符串或日期类型
Y轴字段要求为数值类型
数据量至少需要大于1条
X轴数据通常应按时间或序列顺序排列
提供准确的字段名映射

高级用法

1. 堆叠折线图

当需要展示数据的累积效果时，可以使用堆叠折线图：

{
  type: 'line',
  encoding: {
    x: '季度',
    y: ['销售额', '利润']
  },
  dvStack: true
}

2. 多系列折线图

使用z字段进行多维度分析：

{
  type: 'line',
  encoding: {
    x: '日期',
    y: ['销售额'],
    z: '地区'
  }
}

3. 多Y轴折线图

当需要比较不同量级的数据时，可以使用多Y轴：

{
  type: 'line',
  encoding: {
    x: '日期',
    y: ['销售额', '客户数', '订单数']
  }
}

潜规则与注意事项

多Y轴与Z维度的限制：
- 折线图不支持同时使用多Y轴和Z维度。如果同时设置，多Y轴会被降级为单Y轴。
- 实现代码中的限制：if (y.length >= 2 && typeof z !== 'undefined') { y = [y[0]]; }
数据排序机制：
- 折线图默认会对X轴数据进行升序排序，无需手动排序。
- 排序通过transforms: [{ type: 'sort', order: 'ascending' }]实现。
数据去重：
- X轴和Z轴数据会自动去重，确保图表正确显示。
- 实现通过transforms: [{ type: 'deDuplication' }]实现。
数据点处理：
- 折线图会自动处理缺失数据，显示为断点。
- 数据会自动转换为数值类型，确保正确渲染。
单位显示规则：
- 如果数据中包含单位信息，会自动在坐标轴名称中显示单位。
- 单位信息通过dataMetaInfo[字段名].unit获取。
边界间隙：
- 折线图的X轴默认不会添加边界间隙，设置boundaryGap: false。

实现原理

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

数据预处理：排序、去重和类型转换
数据编码：将原始数据映射到视觉通道
坐标轴配置：根据数据特性生成适当的坐标轴
系列生成：根据Z维度或多Y轴生成多个数据系列

类型兼容性问题

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

数据转换函数需要注意输入类型，避免undefined值导致错误
对象属性访问前需要进行空值检查
Grid参数的top和bottom可能为undefined

示例

基础折线图

{
  type: 'line',
  encoding: {
    x: '日期',
    y: ['销售额']
  }
}

多系列折线图

{
  type: 'line',
  encoding: {
    x: '季度',
    y: ['销售额', '利润', '成本']
  }
}

堆叠折线图

{
  type: 'line',
  encoding: {
    x: '月份',
    y: ['销售额'],
    z: '产品类别'
  },
  dvStack: true
}

常见问题解决

折线图断线问题
- 检查数据是否存在缺失值
- 确保X轴数据连续且有序
多维度数据展示混乱
- 注意多Y轴与Z维度不能同时使用
- 检查数据结构是否符合要求
单位显示问题
- 确保在数据元信息中正确设置了单位信息
数据点标记问题
- 默认折线图不显示每个数据点的标记
- 对于重要数据点，可以考虑使用其他标记方式

简介​

基本用法​

配置参数​

数据要求​

高级用法​

1. 堆叠折线图​

2. 多系列折线图​

3. 多Y轴折线图​

潜规则与注意事项​

实现原理​

类型兼容性问题​

示例​

基础折线图​

多系列折线图​

堆叠折线图​

常见问题解决​

简介