Chart.js-悬停标签以显示x轴上所有数据点的数据 [英] Chart.js - Hover labels to display data for all data points on x-axis
问题描述
我有一个包含多个数据点/线的图形。当前，如果将鼠标悬停在数据点附近，它将显示该点的标签/值。
我想要的是以下内容：当您将鼠标悬停在数据点上的任何位置时在图表中，它将在单个标签中同时显示该x值处的所有数据点的标签+值。
例如，让我们使用给定的数据集：
日期（x标签）：['Jan 01'，'Jan 02'，'Jan 03']
苹果出售：[3,5,1]
橙子出售：[0,10,2]
加仑牛奶出售：[5,7,4]
当您将鼠标悬停在图形中间时，在 Jan 02垂直空间上方，标签应显示：
1月2日
-----------------------
苹果出售：5
桔子出售：10
加仑牛奶：7
有没有简单的方法可以做到这一点？
谢谢。
< blockquote>
有没有简单的方法可以做到这一点？
是的！有一个非常简单的方法可以完成此任务。如果您已阅读文档，则您
无论如何，基本上，您需要将 tooltips模式设置为 index
...
选项：{
工具提示：{
模式：索引
}
}
...
另外，您可能需要设置以下内容：
...
选项：{
工具提示：{
模式：'index'，
相交：false
}，
悬停：{
模式：'index' ，
相交：false
}
}
...
这将使所有预期当鼠标悬停在图形上最接近x值的任何位置时，都会发生悬停/标签交互。
摘自文档：
＃索引
查找相同索引处的项目。如果相交设置为true，则
第一个相交项用于确定数据中的索引。如果
与false相交，则使用x方向上最近的项来确定
的索引。
这是一个工作示例：
var ctx = document.getElementById（'canvas '）.getContext（'2d'）; var chart = new Chart（ctx，{type：'line'，data：{标签：['Jan 01'，'Jan 02'，'Jan 03']]，数据集：[ {标签：'Apples Sold'，数据：[3，5，1]，borderColor：'rgba（255，99，132，0.8）'，填充：false}，{标签：'Oranges Sold'，数据：[0 ，10、2]，borderColor： rgba（255、206、86、0.8），填充：false}，{标签：出售的加仑牛奶，数据：[5、7、4]，borderColor： rgba （54，162，235，0.8）'，填充：false}]}，选项：{工具提示：{模式：索引，交叉：false}，悬停：{模式：索引，交叉：false}}}）;
< script src = https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js >< / script>< canvas id = canvas>< / canvas>
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.
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]
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?
Thanks.
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.
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
}
}
...
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.
From the Documentation :
# 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.
Here is a working example :
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>
这篇关于Chart.js-悬停标签以显示x轴上所有数据点的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
