Chart.js - 悬停标签以显示 x 轴上所有数据点的数据

我有一个包含多个数据点/线的图表。目前，如果您将鼠标悬停在数据点附近，它将显示该点的标签/值。

我想要的是：当您将鼠标悬停在图表上的任意位置时，它将在单个标签中同时显示该 x 值处的所有数据点的标签 + 值。

例如，让我们采用给定的数据集：

Date (x-labels): ['Jan 01','Jan 02','Jan 03']
Apples Sold: [3,5,1]
Oranges Sold: [0,10,2]
Gallons of Milk Sold: [5,7,4]

当您将鼠标悬停在图表中间、“Jan 02”垂直空间上方时，标签应显示：

Jan 02
-----------------------
Apples Sold: 5
Oranges Sold: 10
Gallons of Milk Sold: 7

有没有一种简单的方法可以实现这一点？

Thanks.

有没有一种简单的方法可以实现这一点？

是的 ！！有一种非常简单的方法可以实现这一点。如果你读过文档 http://www.chartjs.org/docs/latest/general/interactions/modes.html#interaction-modes，你可以很容易地找到这一点。

无论如何，基本上你需要设置工具提示模式 to index http://www.chartjs.org/docs/latest/general/interactions/modes.html#index在您的图表选项中，以完成您想要的行为。

...
options: {
   tooltips: {
      mode: 'index'
   }
}
...

此外，您可能需要设置以下内容：

...
options: {
   tooltips: {
      mode: 'index',
      intersect: false
   },
   hover: {
      mode: 'index',
      intersect: false
   }
}
...

这将使所有预期的悬停/标签交互在将鼠标悬停在图表上最近的 x 值处的任何位置时都会发生。

来自文档：

# index
查找同一索引处的项目。如果相交设置为 true，则 第一个相交项用于确定数据中的索引。如果 intersect false 最近的项目，在 x 方向，用于 确定指标。

这是一个工作示例：

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan 01', 'Jan 02', 'Jan 03'],
      datasets: [{
         label: 'Apples Sold',
         data: [3, 5, 1],
         borderColor: 'rgba(255, 99, 132, 0.8)',
         fill: false
      }, {
         label: 'Oranges Sold',
         data: [0, 10, 2],
         borderColor: 'rgba(255, 206, 86, 0.8)',
         fill: false
      }, {
         label: 'Gallons of Milk Sold',
         data: [5, 7, 4],
         borderColor: 'rgba(54, 162, 235, 0.8)',
         fill: false
      }]
   },
   options: {
      tooltips: {
         mode: 'index',
         intersect: false
      },
      hover: {
         mode: 'index',
         intersect: false
      }
   }
});

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