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

Question

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

我想要的是以下内容:当您将鼠标悬停在图表上的任何位置时，它将在单个标签中同时显示该 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

有没有简单的方法来实现这一点？

谢谢。

Answer 1

Is there a simple way to accomplish this?

是的 !!有一种非常简单的方法可以实现这一点。如果您已经阅读了 documentation ，您可以很容易地找到它。

无论如何，基本上你需要将工具提示模式设置为 index 在您的图表选项中，以完成您想要的行为。

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

此外，您可能想要设置以下内容:

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

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

从文档:

# index
Finds item at the same index. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect false the nearest item, in the x direction, is used to determine the index.

这是一个工作示例:

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>