Chart.js 4.4.2，当鼠标悬停在数据点上时，如何在工具提示中显示多个数据点/标签？

Question

正如标题所解释的，我正在尝试使用 Chart.js 创建一个报告，以便为用户提供他们在系统中搜索的数据的图形表示，我目前能够将数据显示在画布上。

我将数据从系统后端以 JSON 格式提供给 JS 函数。我有正在构建饼图的主要数据，以及需要添加到工具提示中的其他数据，以对该数据点提供进一步的解释。

在网上查找没有给出任何有效的可行结果，我该如何解决这个问题？

我附上了下面代码的简化版本，其中显示了数据是如何在系统中生成的。

var ctx = document.getElementById('myChart').getContext('2d');

var data = {
  title: "Booking duration between 01/08/2023 and 29/03/2024",
  labels: ["0 - 6 days", "7 - 13 days", "14 - 20 days", "21 - 27 days", "28 - 34 days"],
  datasets: [{
    data: [2126, 430, 51, 20, 44],
    backgroundColor: ["#82B6EB", "#434348", "#94EE7E", "#F3A15E", "#8385E8"],
    datalabels: ["79.6 %", "16.1 %", "1.91 %", "0.75 %", "1.65 %"],
    databooking: ["( 2126 bookings)", "( 430 bookings)", "( 51 bookings)", "( 20 bookings)", "( 44 bookings)"],
    hoverOffset: 20
  }]
};

var myChart = new Chart(ctx, {
  type: 'pie',
  data: data,
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, chartData) {
          var dataset = chartData.datasets[tooltipItem.datasetIndex];
          var currentValue = dataset.data[tooltipItem.index];
          var dataLabel = dataset.datalabels[tooltipItem.index];
          var dataBooking = dataset.databooking[tooltipItem.index];
          return 'Value: ' + currentValue + ' ' + dataLabel + ' ' + dataBooking;
        },
        title: function(tooltipItems, data) {
          return data.title;
        }
      }
    }
  }
});

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>

<div id="_Chart">
  <canvas id="myChart" style="width:1700px; max-height: 550px;"></canvas>
</div>

Answer 1

请注意，对于 Chart.js v4，

tooltip

配置 需要放置在

options.plugins

内部。传递到工具提示的上下文

callbacks

在here进行了描述。

您的

callbacks

可以写成如下：

callbacks: {
  label: ctx => 'Value: ' + ctx.raw + ' ' + ctx.label + ' ' + ctx.dataset.databooking[ctx.dataIndex],
  title: ctx => data.title
}

请查看下面修改后的代码，看看它是如何工作的。

var ctx = document.getElementById('myChart').getContext('2d');

var data = {
  title: "Booking duration between 01/08/2023 and 29/03/2024",
  labels: ["0 - 6 days", "7 - 13 days", "14 - 20 days", "21 - 27 days", "28 - 34 days"],
  datasets: [{
    data: [2126, 430, 51, 20, 44],
    backgroundColor: ["#82B6EB", "#434348", "#94EE7E", "#F3A15E", "#8385E8"],
    datalabels: ["79.6 %", "16.1 %", "1.91 %", "0.75 %", "1.65 %"],
    databooking: ["( 2126 bookings)", "( 430 bookings)", "( 51 bookings)", "( 20 bookings)", "( 44 bookings)"],
    hoverOffset: 20
  }]
};

var myChart = new Chart(ctx, {
  type: 'pie',
  data: data,
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: ctx => 'Value: ' + ctx.raw + ' ' + ctx.label + ' ' + ctx.dataset.databooking[ctx.dataIndex],
          title: ctx => data.title
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
<canvas id="myChart" style="max-height: 200px"></canvas>