Javascript Chart.js - 如何在悬停时禁用所有内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41952055/
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
Chart.js - how to disable everything on hover
提问by ggsplet
How can I set the code that there will be no hover effects, hover options, (hover) links etc on chart?
如何设置图表上没有悬停效果、悬停选项、（悬停）链接等的代码？
I'm using chart.js. Below is my code, where I set pie chart.
我正在使用 chart.js。下面是我的代码，我在其中设置了饼图。
Html..
..
<div id="canvas-holder" style="width:90%;">
<canvas id="chart-area" />
</div>
..and js...
..和js...
$(document).ready(function () {
var config = {
type: 'pie',
data: {
datasets: [{
data: [60,20],
backgroundColor: [
"#ddd",
"#58AC1C"
],
label: 'Dataset 1'
}],
labels: [
"Bla1 ",
"Bla2 "+
]
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx, config);
};
});
采纳答案by Sanyami Vaidya
You can try
你可以试试
showTooltips: false
You can also use the following link
您也可以使用以下链接
回答by Megan Word
in order to remove all hover styles/tooltips from vanilla chart.js:
为了从 vanilla chart.js 中删除所有悬停样式/工具提示：
var myChart = new Chart(canvas, {
options: {
tooltips: {enabled: false},
hover: {mode: null},
}
...
})
Chart.js is watching all mousemove events on the canvas within which it has instantiated your chart. Setting hover 'mode' to null seems to override all the ways the canvas looks for matching elements to assign activated :hoverclasses to.
Chart.js 正在观察画布上的所有 mousemove 事件，它在其中实例化了您的图表。将悬停“模式”设置为 null 似乎覆盖了画布寻找匹配元素以将激活的:hover类分配给的所有方式。
The tooltip event seems separate, so I had to use both lines to make the chart effectively static.
工具提示事件似乎是分开的，所以我不得不使用这两行来使图表有效地静态化。
Note, initial animations still work on a chart with these options.
请注意，初始动画仍然适用于具有这些选项的图表。
UPDATE: newest Chart.js has re-bundled the way hover is 'listened' for:
更新：最新的 Chart.js 重新捆绑了悬停被“监听”的方式：
var myChart = new Chart(canvas, {
options: {
events: []
}
...
})
making the 'events' option an empty list (instead of ['click', 'hover', etc]) makes the chart 'blind'/static because it will be listening for no events.
使 'events' 选项成为空列表（而不是 ['click', 'hover', etc]）会使图表“盲目”/静态，因为它不会监听任何事件。
回答by dcalmeida
There's another option:
还有另一种选择：
states: {
hover: {
filter: {
type: 'none',
}
},
},
回答by Víctor Gutiérrez
If what you want is prevent any effect when hovering the mouse over any series, you should disable tooltipand hoverstate. You can do it like this:
如果您想要在将鼠标悬停在任何系列上时防止任何影响，您应该禁用tooltip并hover声明。你可以这样做：
$(function () {
Highcharts.chart('container', {
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
tooltip: {
enabled: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});#reporting {
position: absolute;
top: 55px;
right: 20px;
font: 12px Arial, Verdana;
color: #666;
background: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="reporting"></div>(Template taken from Highcharts documentation).
（模板取自 Highcharts 文档）。
Hope it helps :)
希望能帮助到你 ：）
