如何在Chart.js触发Tooltip时输出完整数据集至控制台

要实现鼠标悬停到图表数据时，在控制台输出包含所有标签与对应数据的二维数组（格式如[['January',12], ['February',19], ['March',3], ['April',5]]），可以通过修改tooltip的回调逻辑来完成，具体代码如下：

修改后的JavaScript代码 #

let ctx = document.getElementById('myChart').getContext('2d')
let myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
      label: 'Data',
      data: [12, 19, 3, 5],
      borderColor: 'blue'
    }]
  },
  options: {
    plugins: {
      tooltip: {
        mode: 'nearest',
        // 在tooltip显示前触发一次，用于输出全量数据
        beforeShow: function(context) {
          // 从图表实例中获取所有标签和对应数据集
          const labels = context.chart.data.labels;
          const datasetData = context.chart.data.datasets[0].data;
          // 将标签与数据配对成目标二维数组
          const fullDataArray = labels.map((label, idx) => [label, datasetData[idx]]);
          console.log(fullDataArray);
        },
        callbacks: {
          label: function (tooltipItem) {
            return tooltipItem.raw;
          }
        }
      }
    }
  }
});

配套CSS代码 #

.as-console-row-code {
  white-space: initial !important;
}

配套HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.0/chart.min.js"></script>
<canvas id="myChart"></canvas>

关键说明 #

• 改用beforeShow回调：这个回调在tooltip即将显示时仅触发一次，避免了原label回调因每个数据项重复触发导致的多次输出问题
• 通过context.chart.data直接获取图表的全量标签和数据，使用map方法快速将标签与对应位置的数据配对成目标格式的二维数组
• 保留原label回调，维持tooltip原本的显示内容，不影响原有交互体验

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