基于AntV G2构建瀑布图

本文由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);
}

• 创建一个自定义函数titleLeft来添加标题。
• 使用node对象设置标题的位置、文本、样式和颜色。

总结与展望

开发这段代码的过程让我深入了解了AntV G2库的特性和功能。我学到了如何加载数据、转换数据、绘制瀑布图并添加辅助元素。

未来，我计划扩展该代码的功能，包括：

• 支持多种数据源
• 提供交互功能，如鼠标悬停和数据过滤

• 优化代码结构和性能

  更多组件：
  <img src="https://block-design.oss-cn-shenzhen.aliyuncs.com/haomo-ai/image/id-529ef0347bb8876c460f0bad3529c615.png" />

  获取更多Echos

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

  项目地址：传送门

  扫码加入AI生成前端微信讨论群：