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

有没有一种简单的方法来实现这一目标？

是的!! 有一种非常直接的方法来实现这一目标.如果您已阅读文档,您可以很容易地找到它.

总之,基本上你需要将设置提示方式,以index在您的图表选项,为了完成你想要的行为.

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

此外,您可能希望设置以下内容:

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

这将使得当将图形上的任何位置悬停在最近的x值时,将发生所有预期的悬停/标签交互.

从文档:

#指数
相同的指数在查找项目.如果交叉设置为true,则使用第一个交叉项来确定数据中的索引.如果相交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>

Answer 2

对于 Chart.js 3.3.2，您可以使用 @baburao 的方法并进行一些更改。你可以查看文档。普京。tooltip​ plugins例子：

...
options: {
    plugins: {
        tooltip: {
            mode: 'nearest',
            intersect: false
        }
    }
}
...