如何在图表 js 折线图中的所有工具提示中添加欧元符号 (€)

Question

我有一个折线图，每个数据点都有一个工具提示。数据是价格，所以我想在它们之前添加一个欧元符号，但这似乎比听起来难。

我的代码：

const labelsjaar = [
  'jan',
  'feb',
  'mrt',
  'apr',
  'mei',
  'jun',
    'jul',
    'aug',
    'sept',
    'okt',
    'nov',
    'dec',
];
const datajaar = {
  labels: labelsjaar,
  datasets: [{
    label: 'Omzet',
    backgroundColor: 'rgb(230 0 126)',
    borderColor: 'rgb(230 0 126)',
    data: [0,0,0,0,0,0,0,24,177,590.44,801.38,98.62],
  }]
};
Chart.defaults.font.family = 'Panton';
Chart.defaults.font.size = 16;
const configjaar = {
  type: 'line',
  data: datajaar,
  options: {
    maintainAspectRatio: false,
    tooltips: {
      enabled: true,
      mode: 'single',
      callbacks: {
        label: function (tooltipItems, data) {
            var i = tooltipItems.index;
            return data.labels[i] + ': ' + data.datasets[0].data[i] + ' €';
        }
      }
    }
  }
};
const myChartjaar = new Chart(
    document.getElementById('myChartjaar'),
    configjaar
);

我在网上找到了这个解决方案：

tooltips: {
  enabled: true,
  mode: 'single',
  callbacks: {
    label: function (tooltipItems, data) {
        var i = tooltipItems.index;
        return data.labels[i] + ': ' + data.datasets[0].data[i] + ' €';
    }
  }
}

但是我的工具提示没有变化，看不到欧元符号。

我做错了什么？

我的图表的 jsfiddle 可以在这里看到：https://jsfiddle.net/r4nw91bo/

在下面的评论说我看错文档后，我尝试了以下操作：

const labeltext = (tooltipItems) => {
  tooltipItems.forEach(function(tooltipItem) {
    tooltiplabel = '€' + tooltipItem.parsed.y.toLocaleString();
  });
  return tooltiplabel;
};

const configjaar = {
  type: 'line',
  data: datajaar,
  options: {
    plugins:{
      tooltip:{
        callbacks: {
          label: labeltext,
        }
      }
    },
    maintainAspectRatio: false,
  }
};

但这给了我错误：tooltipItems.forEach is not a function。如果我使用 footer 或 title 而不是 label，它会完美运行，但我不想在我的工具提示中添加标题或页脚，我想将现有内容替换为我添加的 € 符号。

我也试过使用他们的示例添加美元符号，如下所示：

const configjaar = {
  type: 'line',
  data: datajaar,
  options: {
    plugins:{
      tooltip:{
        callbacks: {
          label: function(context) {
              const label = context.dataset.label || '';

              if (label) {
                  label += ': ';
              }
              if (context.parsed.y !== null) {
                  label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
              }
              return label;
          }
        }
      }
    },
    maintainAspectRatio: false,
  }
};

但是在悬停数据点时会出现错误：Assignment to constant variable.

Answer 1

这是因为您在 V3 中使用了 V2 语法，V3 与 V2 相比有一些重大的重大变化。请阅读所有的 migration guide。

要使回调正常工作，您需要在 options.plugins.tooltip.callbacks.label

中定义它

编辑：

就像错误所说的那样，您无法重新分配一个常量变量，因为它是一个常量。如果你把它改成 let 它工作正常：

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'pink'
    }]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            let label = context.dataset.label || '';

            if (label) {
              label += ': ';
            }
            if (context.parsed.y !== null) {
              label += new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD'
              }).format(context.parsed.y);
            }
            return label;
          }
        }
      }
    },
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

如何在图表 js 折线图中的所有工具提示中添加欧元符号 (€)

How can I add a euro sign (€) to all tooltips in my chart js line chart

javascript

charts

chart.js