Waterfall

2 min read

定义

瀑布图形似瀑布流水，采用绝对值与相对值结合的方式，适用于表达数个特定数值之间的数量变化关系。

视觉通道

颜色、长度、位置

分析目的

比较、趋势

数据准备

1 个「数值」字段

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

Quick start

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

const data = [
  { type: '日用品', money: 120 },
  { type: '伙食费', money: 900 },
  { type: '交通费', money: 200 },
  { type: '水电费', money: 300 },
  { type: '房租', money: 1200 },
  { type: '商场消费', money: 1000 },
  { type: '红包收入', money: -2000 },
];

const waterfallPlot = new Waterfall('container', {
  data,
  xField: 'type',
  yField: 'money',
});

waterfallPlot.render();

📊 See more examples.

🎨 For an overview of the waterfall plot options see the API reference。

Waterfall features

Color (Fill)

通过 risingFill 和 fallingFill 可以指定普通柱形颜色和正值柱形颜色，对于汇总值可以通过 total.style.fill 指定颜色。

Example：

{
  risingFill: 'red',
  fallingFill: 'green',
  total: {
    style: {
      fill: '#96a6a6',
    },
  },
}