Javascript Chart.js 上的悬停模式
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/42804237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hover mode on Chart.js
提问by JohnSnow
Is it possible to have the hover activated when you are not hovering over a specific 'point' in a line graph?
当您没有将鼠标悬停在折线图中的特定“点”上时,是否可以激活悬停?
I want thatparticular tooltip to activate whenever I hover over any part of the chart.
我希望在我将鼠标悬停在图表的任何部分时激活该特定工具提示。
Edit:something like this http://watchstocks.herokuapp.com/
回答by jordanwillis
Yes, you can use chart.js to configure tooltips to get a similiar behavior to the chart that you referenced.
是的,您可以使用 chart.js 配置工具提示以获得与您引用的图表类似的行为。
For more information, check out the modetooltip config option and hoverconfig options for your needs. Here is an example.
有关更多信息,请查看mode工具提示配置选项并根据您的需要悬停配置选项。这是一个例子。
options: {
responsive: true,
title:{
display:true,
text:'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
},
}]
}
}
Here is a codepen exampledemonstrating the behavior that matches your example.
这是一个codepen 示例,演示了与您的示例相匹配的行为。
回答by Jeff Schwarting
tooltips: {
mode: 'x-axis'
},
^^ That will bring up the tooltip when you hover over any y-axis position. If you only want it to show up when you hover over a point on a line, use this:
^^ 当您将鼠标悬停在任何 y 轴位置上时,将显示工具提示。如果您只想在将鼠标悬停在线上的点上时显示它,请使用以下命令:
tooltips: {
mode: 'label'
},

