图表JS工具提示货币问题-堆叠条形图

Question

我使用ChatJS，我想在工具提示中的每个数字之后添加一个欧元符号。在我的大多数图表上，它工作得很完美，但是堆叠的条形图给我带来了麻烦。

下面是一个类似于我的代码的示例(只是一个基本的例子)

var barChart = new Chart(ctx_barChart, {
  type: 'bar',
  data: {
    labels: ["Fruits"],
    datasets: [{
        label: [
          ["Apple"]
        ],
        data: [12],
        backgroundColor: 'blue',
        barThickness: 80,
      },
      {
        label: ["Banana"],
        data: [15],
        backgroundColor: 'red',
        barThickness: 80,
      },
    ]
  },
  options: {
    maintainAspectRatio: false,
    indexAxis: 'y',
    responsive: true,
    scales: {
      x: {
        stacked: true,
        display: false,
      },
      y: {
        stacked: true,
        display: false,
        mirror: true,
      }
    },
    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: 'EUR'
              }).format(context.parsed.y);
            }
            return label;
          }
        }
      },
      legend: {
        display: false
      },
      title: {
        display: false,
      },
    },
  },
});

工具提示都显示0，00美元，但我的值12和15没有。有人有建议吗？

Answer 1

您应该使用context.parsed.x而不是context.parsed.y，因为它是水平条形图。

请看一看你的修正代码，看看它是如何工作的。

​

new Chart('barChart', {
  type: 'bar',
  data: {
    labels: ["Fruits"],
    datasets: [{
        label: "Apple",
        data: [12],
        backgroundColor: 'blue',
        barThickness: 80,
      },
      {
        label: "Banana",
        data: [15],
        backgroundColor: 'red',
        barThickness: 80,
      },
    ]
  },
  options: {
    maintainAspectRatio: false,
    indexAxis: 'y',
    responsive: true,
    scales: {
      x: {
        stacked: true,
        display: false,
      },
      y: {
        stacked: true,
        display: false,
        mirror: true,
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: ctx => ctx.dataset.label + ': ' + new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(ctx.parsed.x)
        }
      },
      legend: {
        display: false
      },
      title: {
        display: false,
      },
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="barChart" height="100"></canvas>

​