基于AntV G2构建瀑布图

ScriptEcho

已于 2024-07-25 10:37:16 修改

阅读量331

点赞数 4

文章标签：前端

于 2024-07-25 10:35:23 首次发布

本文链接：https://blog.youkuaiyun.com/ScriptEcho/article/details/140683265

版权

Alt

本文由ScriptEcho平台提供技术支持

项目地址：传送门

基于AntV G2构建瀑布图

应用场景介绍

瀑布图是一种常见的图表类型，用于展示数据的累积变化情况。它可以直观地显示数据的增减幅度，广泛应用于金融、销售、运营等领域。

代码基本功能介绍

本代码使用AntV G2库实现了瀑布图的基本功能，包括：

从远程数据源加载数据
将数据转换为G2友好的格式
使用堆叠条形图绘制瀑布图
添加折线、标题和标签等辅助元素

功能实现步骤及关键代码分析说明

1. 数据加载和转换

chart
  .interval()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/nivo-gain-lost.json',
    transform: [
      {
        type: 'fold',
        fields: [
          'lost > 100$',
          'lost <= 100$',
          'gained <= 100$',
          'gained > 100$',
        ],
      },
    ],
  })
  .transform([{ type: 'stackY' }]);

使用fetch方法从远程数据源加载数据。
使用transform方法将数据转换为G2友好的格式，包括将数据折叠为堆叠条形图所需的形式。

2. 绘制瀑布图

.encode('x', 'user')
.encode('y', 'value')
.encode('color', 'key')
.scale('x', { padding: 0.2 })
.scale('y', { domainMin: -100, domainMax: 100 })
.scale('color', {
  domain: ['lost > 100$', 'lost <= 100$', 'gained <= 100$', 'gained > 100$'],
  range: ['#97e3d5', '#61cdbb', '#e25c3b', '#f47560'],
});

使用interval方法绘制堆叠条形图。
使用encode方法指定数据的x轴、y轴和颜色映射。
使用scale方法设置x轴和y轴的范围和比例。

3. 添加辅助元素

chart
  .lineY()
  .data([0])
  .style('lineWidth', 2)
  .style('stroke', '#e25c3b')
  .style('strokeOpacity', 1);

chart.call(titleLeft, '75%', 'lost', '#61cdbb');
chart.call(titleLeft, '20%', 'gain', '#e25c3b');

使用lineY方法添加折线。
使用call方法添加自定义标题。

4. 自定义标题函数

function titleLeft(node, y, text, fill) {
  node
    .text()
    .style('x', -10)
    .style('y', y)
    .style('text', text)
    .style('fontWeight', 'bold')
    .style('dy', -10)
    .style('transform', 'rotate(-90)')
    .style('fill', fill);
}