如何在Chart.js中根据营收数据自定义Y轴标签为缩写格式？

问题 #

我正在绘制某公司的营收时间折线图，给定一组Y轴营收数据和对应的X轴时间标签。当前Y轴默认显示350,000这类格式，希望改成350K的缩写形式，且无需硬编码，能基于Y轴坐标自动适配配置。

营收数据（Y轴） #

const revenueData = [227223.0, 294011.0, 263676.0, 199686.0, 289792.0, 224023.0, 253386.0, 269343.0, 324612.0, 220999.0];

对应时间（X轴） #

const xAxisLabels = ["Q4 FY20","Q1 FY21","Q2 FY21","Q3 FY21","Q4 FY21","Q1 FY22","Q2 FY22","Q3 FY22","Q4 FY22","Q1 FY23"]; 

现有完整JS代码 #

const revenueData = [227223.0, 294011.0, 263676.0, 199686.0, 289792.0, 224023.0, 253386.0, 269343.0, 324612.0, 220999.0];

const xAxisLabels = ["Q4 FY20","Q1 FY21","Q2 FY21","Q3 FY21","Q4 FY21","Q1 FY22","Q2 FY22","Q3 FY22","Q4 FY22","Q1 FY23"];  

const chartData = {
   labels: xAxisLabels,
   datasets: [{
      yAxisID: 'revenueAxis',              
      label: 'Revenue JPY',
      data: revenueData,
      fill: false,
      borderColor: 'red',
      backgroundColor: 'red'
   }],
};

const chartConfig = {
   type: "line",
   data: chartData,
   options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
         revenueAxis: {
            type: 'linear',
            position: 'left',
            grid: { display: false },
            ticks: { color: 'red', },
            font: { family: "Garamond",},
            title: {
               text: 'Revenue in JPY',
               display: true
            }
         },
         x: {
            grid: { display: false }
         }
      },
      plugins: {
         legend: { display: false },
         title: {
            display: true,
            text: 'Custom Chart Title',
            font: {
               size: 20,
               weight: 'normal',
            },
            padding: {
               top: 10,
               bottom: 30
            }
         }, 
      },
   }
};

const newChart = new Chart(document.getElementById('chartContainer'), chartConfig);

解决方案 #

要实现Y轴标签自动缩写为K（千）格式，只需在revenueAxis的ticks配置中添加一个callback函数，自动处理数值转换：

修改后的完整代码 #

const revenueData = [227223.0, 294011.0, 263676.0, 199686.0, 289792.0, 224023.0, 253386.0, 269343.0, 324612.0, 220999.0];

const xAxisLabels = ["Q4 FY20","Q1 FY21","Q2 FY21","Q3 FY21","Q4 FY21","Q1 FY22","Q2 FY22","Q3 FY22","Q4 FY22","Q1 FY23"];  

const chartData = {
   labels: xAxisLabels,
   datasets: [{
      yAxisID: 'revenueAxis',              
      label: 'Revenue JPY',
      data: revenueData,
      fill: false,
      borderColor: 'red',
      backgroundColor: 'red'
   }],
};

const chartConfig = {
   type: "line",
   data: chartData,
   options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
         revenueAxis: {
            type: 'linear',
            position: 'left',
            grid: { display: false },
            ticks: { 
               color: 'red',
               // 新增数值转换回调函数
               callback: function(value) {
                  // 将数值除以1000，保留整数（可根据需求调整小数位数）
                  const formattedValue = (value / 1000).toFixed(0);
                  return `${formattedValue}K`;
               }
            },
            font: { family: "Garamond",},
            title: {
               text: 'Revenue in JPY (K)', // 可选：更新标题说明单位
               display: true
            }
         },
         x: {
            grid: { display: false }
         }
      },
      plugins: {
         legend: { display: false },
         title: {
            display: true,
            text: 'Custom Chart Title',
            font: {
               size: 20,
               weight: 'normal',
            },
            padding: {
               top: 10,
               bottom: 30
            }
         }, 
      },
   }
};

const newChart = new Chart(document.getElementById('chartContainer'), chartConfig);

关键说明 #

• ticks.callback函数会接收每个Y轴刻度的数值value，将其除以1000后格式化，再拼接K后缀，实现自动适配。
• 如果需要保留一位小数（比如227.2K），只需把toFixed(0)改成toFixed(1)即可。
• 若后续需要支持更大数值（如百万级），可扩展判断逻辑，添加M单位的处理：

  callback: function(value) {
     if (value >= 1000000) {
        return `${(value / 1000000).toFixed(1)}M`;
     } else if (value >= 1000) {
        return `${(value / 1000).toFixed(0)}K`;
     }
     return value;
  }
  

内容的提问来源于stack exchange，提问作者sweet-pineapple