Chart.js - 悬停标签以显示 x 轴上所有数据点的数据
问题说明
我有一个包含多个数据点/线的图表.目前，如果您将鼠标悬停在数据点附近，它将显示该点的标签/值.
I have a graph with multiple data points / lines. Currently, if you hover near a data point, it will display the label/value for that point.
我想要的是:当您将鼠标悬停在图表上的任意位置时，它将在单个标签中同时显示该 x 值处所有数据点的标签 值.
What I'd like is the following: when you hover anywhere on the chart, it will display the labels values for all data points at that x-value simultaneously in a single label.
例如，让我们以给定的数据集为例:
For example, let's take the given datasets:
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"垂直空间上方时，标签应显示:
When you hover over the middle of the graph, above the 'Jan 02' vertical space, the label should display:
Jan 02
-----------------------
Apples Sold: 5
Oranges Sold: 10
Gallons of Milk Sold: 7
有没有一种简单的方法可以做到这一点?
Is there a simple way to accomplish this?
谢谢.
正确答案
有没有一种简单的方法可以做到这一点?
Is there a simple way to accomplish this?
是的！有一种非常简单的方法可以做到这一点.如果您已阅读 文档，您很容易找到.
YES !! There is a quite straightforward way to accomplish this. If you would have read the documentation, you could have found that pretty easily.
无论如何，基本上你需要将工具提示模式设置为index 在您的图表选项中，以完成您想要的行为.
Anyway, basically you need to set the tooltips mode to index in your chart options, in order to accomplish the behavior you want.
...
options: {
tooltips: {
mode: 'index'
}
}
...
此外，您可能还需要设置以下内容:
Additionally, you probably want to set the following:
...
options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'index',
intersect: false
}
}
...
这将使所有预期的悬停/标签交互在图表上任何位置悬停在最近的 x 值时发生.
This will make it so all of the expected hover/label interactions will occur when hovering anywhere on the graph at the nearest x-value.
#索引
在同一索引处查找项目.如果相交设置为真，则第一个相交项用于确定数据中的索引.如果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>这篇好文章是转载于：学新通技术网
