logoCreated with Sketch.

G2Plot

折线图

阅读时间约 2 分钟

定义

使用一条折线的线段显示数据在一个具有顺序性的维度上的变化。

别名: 折线图、线图、基础折线图

何时使用

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

视觉通道

位置、方向

分析目的

Comparison, Data Over Time

数据准备

1 个「时间」或「有序名词」字段

1 个「数值」字段

设计指引

用法建议

design

元素构成

design
  • X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
  • Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
  • 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
  • 标签：用来解释数据点的值。
  • 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

快速上手

import { Line } from '@antv/g2plot';

fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
  .then((res) => res.json())
  .then((data) => {
    const line = new Line('container', {
      data,
      xField: 'Date',
      yField: 'scales',
    });

    line.render();
  });
📊 查看更多示例.

🎨 折线图详细的配置参考 API 文档。

折线图特性

曲线图

曲线图是用曲线将一系列的数据点连接的图表, 对应的只需要配置 smooth: true 属性即可。

阶梯型直线图

对应的只需要配置 stepType 属性即可。

options: {
  stepType: 'vh' // 可选项：hv | vh | hvh | vhv
}