Line

2 min read

Description

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

Alias: 折线图、线图、基础折线图

When to use:

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

视觉通道

位置、方向

This chart could be used for

Comparison, Data Over Time

数据准备

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

1 个「数值」字段

Design Guide

用法建议

design

元素构成

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

Quick start

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();
  });
📊 See more examples.

🎨 For an overview of the line plot options see the API reference.

Line plot features

Smooth

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

Step

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

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