G2-- 2 面积图并为提示添加单位

最新推荐文章于 2025-08-15 09:01:53 发布

原创最新推荐文章于 2025-08-15 09:01:53 发布 · 456 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

G2 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用AntV G2库在JavaScript中创建动态的销售数据折线图和面积图，通过时间轴展示24小时内的数据变化，包括数据配置、坐标轴定制和交互式tooltip。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

代码可直接在官网里运行

import { Chart } from '@antv/g2';

    const data = [
      {
        Data: '2021-07-24 8:00',
        sales: 57
      },
      {
        Data: '2021-07-24 12:00',
        sales: 55
      },
      {
        Data: '2021-07-24 16:00',
        sales: 60
      },
      {
        Data: '2021-07-24 20:00',
        sales: 54
      },
      {
        Data: '2021-07-24 24:00',
        sales: 57
      },
      {
        Data: '2021-07-25 4:00',
        sales: 56
      },
      {
        Data: '2021-07-25 8:00',
        sales: 62
      },
      {
        Data: '2021-07-25 12:00',
        sales: 60
      },
      {
        Data: '2021-07-25 16:00',
        sales: 55
      },
      {
        Data: '2021-07-25 20:00',
        sales: 58
      },
      {
        Data: '2021-07-25 24:00',
        sales: 60
      },
      {
        Data: '2021-07-26 4:00',
        sales: 57
      },
      {
        Data: '2021-07-26 8:00',
        sales: 55
      },
      {
        Data: '2021-07-26 12:00',
        sales: 57
      },
      {
        Data: '2021-07-26 16:00',
        sales: 58
      },
      {
        Data: '2021-07-26 20:00',
        sales: 60
      },
      {
        Data: '2021-07-26 24:00',
        sales: 57
      }
    ];
    const chart = new Chart({
      container: 'container',
      autoFit: true,
      height: 500,
      padding: [100, 100, 100, 100]
    });
    chart.data(data);
    chart.scale('Data', {
      range: [0, 1],
      tickCount: 10,
      type: 'timeCat'
    });
    chart.scale('sales', {
      nice: true,
      min: 40,
      alias: '当前水位',
    });

    chart.axis('sales', {
      label: {
        formatter: text => {
          return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ' m';
        }
      }
    });
    chart.tooltip({
      showCrosshairs: true,
    });

    chart.line().position('Data*sales');
    chart.area().position('Data*sales').tooltip('Data*sales', (Data: any, sales: any) => {
      return {
        name: Data,
        value: sales + 'm',
      };
    });
    chart.render();