如何为Chart.js折线图所有tooltip添加欧元符号且解决配置不生效问题

问题原因梳理 #

• 初始配置失效：你参考的是Chart.js v2版本的配置语法，v3及以上版本的tooltip相关配置已经迁移到options.plugins.tooltip节点下，外层tooltips配置已被废弃，因此修改不生效。
• forEach报错原因：tooltip.callbacks.label回调的入参是单个tooltip上下文对象，只有title、footer类回调的入参才是数组，因此对单个对象调用forEach方法会报错。
• 常量赋值报错原因：你用const声明了label变量，后续代码又对该变量做拼接赋值操作，const声明的常量不允许二次赋值，因此触发报错。

正确实现代码 #

直接使用以下配置即可实现欧元格式的tooltip展示：

const configjaar = {
  type: 'line',
  data: datajaar,
  options: {
    plugins:{
      tooltip:{
        callbacks: {
          label: function(context) {
              // 改用let声明变量，允许后续修改
              let label = context.dataset.label || '';
              if (label) {
                  label += ': ';
              }
              if (context.parsed.y !== null) {
                  // 币种修改为EUR即可显示欧元符号，自动适配格式
                  label += new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR' }).format(context.parsed.y);
              }
              return label;
          }
        }
      }
    },
    maintainAspectRatio: false,
  }
};

如果不需要国际化自动格式化，直接拼接欧元符号也可以：

label: function(context) {
  return `${context.dataset.label}: €${context.parsed.y}`;
}

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