Syncfusion EJ2折线图：实现带逗号的货币格式工具提示

内置方法实现 #

Syncfusion EJ2 图表本身支持通过格式化配置实现带逗号分隔的货币格式，无需自定义函数即可完成需求：

1. 配置Y轴标签格式 #

修改primaryYAxis配置，通过labelFormat结合numberFormatOptions显式开启千位分隔：

primaryYAxis: {
    title: 'Currency ($)',
    labelFormat: 'C0',
    numberFormatOptions: { 
        style: 'currency', 
        currency: 'USD', 
        useGrouping: true, 
        maximumFractionDigits: 0 
    }
}

2. 配置Tooltip格式 #

直接在tooltip中设置格式化规则，让提示框显示带逗号的货币值：

tooltip: {
    enable: true,
    format: '${series.name}: ${point.y:C0}'
}

自定义函数实现（内置方法不满足时） #

如果内置格式化无法适配特殊需求，可通过图表事件回调自定义处理逻辑：

1. 自定义Y轴标签 #

通过axisLabelRender事件拦截并修改Y轴标签文本：

var chart = new ej.charts.Chart({
    // 原有配置...
    events: {
        axisLabelRender: (args) => {
            if (args.axis.name === 'primaryYAxis') {
                const formattedValue = new Intl.NumberFormat('en-US', {
                    style: 'currency',
                    currency: 'USD',
                    maximumFractionDigits: 0,
                    useGrouping: true
                }).format(parseFloat(args.text));
                args.text = formattedValue;
            }
        }
    }
}, '#element');

2. 自定义Tooltip内容 #

通过tooltipRender事件修改提示框的显示文本：

var chart = new ej.charts.Chart({
    // 原有配置...
    events: {
        tooltipRender: (args) => {
            const formattedY = new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD',
                maximumFractionDigits: 0,
                useGrouping: true
            }).format(args.point.y);
            args.text = `${args.series.name}: ${formattedY}`;
        }
    }
}, '#element');

完整修改后的示例代码 #

var chart = new ej.charts.Chart({
    primaryXAxis: {
        title: 'Years',
        lineStyle: { width: 0 },
        labelFormat: 'y',
        intervalType: 'Years',
        valueType: 'DateTime',
        edgeLabelPlacement: 'Shift'
    },
    primaryYAxis: {
        title: 'Currency ($)',
        labelFormat: 'C0',
        numberFormatOptions: { 
            style: 'currency', 
            currency: 'USD', 
            useGrouping: true, 
            maximumFractionDigits: 0 
        }
    },
    series: [
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y',
            width: 2, name: 'China',
            marker: { visible: true, width: 10, height: 10 }
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y1',
            width: 2, name: 'Australia',
            marker: { visible: true, width: 10, height: 10 }
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y2',
            width: 2, name: 'Japan',
            marker: { visible: true, width: 10, height: 10 }
        }
    ],
    title: 'Unemployment Rates 1975-2010',
    tooltip: {
        enable: true,
        format: '${series.name}: ${point.y:C0}'
    }
}, '#element');

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