如何为Chart.js图表的每个坐标轴设置不同单位？

要解决多数据集下Tooltip显示统一单位的问题，核心是利用回调函数里的datasetIndex区分不同数据集，匹配对应的专属单位。以下是两种可行实现方案：

方法1：给每个数据集添加自定义单位属性 #

直接在每个dataset对象中定义unit属性，在Tooltip回调中读取该属性：

new Chart("myChart", {
  type: "line",
  data: {
    labels: ExerciseVariations,
    datasets: [{ 
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      borderColor: "red",
      fill: false,
      unit: "kg" // 自定义单位
    }, { 
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
      borderColor: "green",
      fill: false,
      unit: "cal" // 自定义单位
    }, { 
      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
      borderColor: "blue",
      fill: false,
      unit: "rpm" // 自定义单位
    }]
  },
  options: {            
    tooltips: {
      callbacks: {
        label: (item) => `${item.yLabel}${item.dataset.unit}`
      },
    },
  }
});

方法2：单独维护单位数组 #

如果不想修改数据集结构，可创建与数据集顺序对应的单位数组，通过datasetIndex索引匹配：

// 单位顺序与datasets数组顺序一一对应
const datasetUnits = ["kg", "cal", "rpm"];

new Chart("myChart", {
  type: "line",
  data: {
    labels: ExerciseVariations,
    datasets: [{ 
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      borderColor: "red",
      fill: false
    }, { 
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
      borderColor: "green",
      fill: false
    }, { 
      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
      borderColor: "blue",
      fill: false
    }]
  },
  options: {            
    tooltips: {
      callbacks: {
        label: (item) => `${item.yLabel}${datasetUnits[item.datasetIndex]}`
      },
    },
  }
});

关键说明 #

• item参数包含当前Tooltip对应的数据项信息，datasetIndex与data.datasets数组的索引完全对应，可精准匹配到目标数据集的单位。
• 两种方案均可实现不同数据集显示不同单位，可根据自身代码结构选择适配方式。

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