logoCreated with Sketch.

G2Plot

面积图

阅读时间约 1 分钟

定义

使用带填充区域的线段显示数据在一个具有顺序性的维度上的变化。

何时使用

面积图可用来展示连续性数据，可很好地表示趋势、累积、减少以及变化。 堆叠面积图更擅于展示部分和整体之间的关系或趋势，而不是传达特定的值。

视觉通道

颜色、位置

分析目的

比较、组成、趋势

数据准备

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

1 个「数值」字段

1 个「无序名词」字段(可选)

设计指引

用法建议

design

元素构成

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

快速上手

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

fetch('https://gw.alipayobjects.com/os/bmw-prod/360c3eae-0c73-46f0-a982-4746a6095010.json')
  .then((res) => res.json())
  .then((data) => {
    const area = new Area('container', {
      data,
      xField: 'timePeriod',
      yField: 'value',
      xAxis: {
        range: [0, 1],
      },
    });
    area.render();
  });
📊 查看更多示例.

🎨 面积图详细的配置参考 API 文档。