如何在AntV DualAxes图表中实现Y轴数值KMB格式化

核心实现方案 #

通过DualAxes组件的yAxis配置项，结合自定义数值格式化函数，为两个Y轴分别配置KMB（千/百万/十亿）格式转换逻辑，同时同步处理tooltip的数值展示。

完整代码示例 #

import React from 'react';
import { DualAxes } from '@ant-design/plots';

// 通用KMB数值格式化函数
const formatToKMB = (num) => {
  if (num >= 1e9) return `${(num / 1e9).toFixed(1)}B`;
  if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
  if (num >= 1e3) return `${(num / 1e3).toFixed(1)}K`;
  return num.toString();
};

const DualAxesKMBChart = () => {
  // 自定义模拟数据（可替换为CubeJS查询返回的真实数据）
  const chartData = [
    { period: '2024-01', sales: 1250000, users: 92000 },
    { period: '2024-02', sales: 1870000, users: 135000 },
    { period: '2024-03', sales: 2630000, users: 168000 },
    { period: '2024-04', sales: 34200000, users: 221000 },
    { period: '2024-05', sales: 47800000, users: 295000 },
  ];

  const chartConfig = {
    data: chartData,
    xField: 'period',
    yField: ['sales', 'users'],
    geometryOptions: [
      { geometry: 'line', smooth: true, color: '#1890ff' },
      { geometry: 'line', smooth: true, color: '#2fc25b' },
    ],
    // 双轴格式化核心配置
    yAxis: [
      {
        field: 'sales',
        title: '销售额',
        formatter: (value) => formatToKMB(value),
      },
      {
        field: 'users',
        title: '用户数',
        formatter: (value) => formatToKMB(value),
      },
    ],
    // tooltip同步格式化
    tooltip: {
      formatter: (datum) => ({
        name: datum.period,
        value: `${formatToKMB(datum.sales)} (销售额) / ${formatToKMB(datum.users)} (用户数)`,
      }),
    },
  };

  return <DualAxes {...chartConfig} />;
};

export default DualAxesKMBChart;

异常排查要点 #

• 确保yAxis是数组结构，每个元素对应一个Y轴的字段和配置，避免单轴配置结构混淆双轴逻辑。
• 若数值精度不符合需求，可调整toFixed()的参数（如toFixed(0)显示整数）。
• 对接CubeJS数据时，只需将chartData替换为CubeJS查询结果，保证xField和yField与返回字段名匹配即可。

内容的提问来源于stack exchange，提问作者Noman