如何设置代码使图表上没有悬停效果、悬停选项、(悬停)链接等?
我正在使用 chart.js。下面是我的代码,我在其中设置了饼图。
HTML..
<div id="canvas-holder" style="width:90%;">
<canvas id="chart-area" />
</div>
..和 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);
};
});
最佳答案
为了从 vanilla chart.js 中删除所有悬停 styles/tooltips
:
var myChart = new Chart(canvas, {
options: {
tooltips: {enabled: false},
hover: {mode: null},
}
...
});
Chart.js 正在监视 Canvas 上的所有 mousemove
事件,它已在其中实例化了您的图表。将 hover 'mode' 设置为 null 似乎覆盖了 Canvas 查找匹配元素以将激活的 :hover
类分配给的所有方式。
工具提示事件似乎是分开的,所以我不得不使用这两行来使图表有效静态化。
请注意,初始动画在具有这些选项的图表上仍然有效。
更新:最新的 Chart.js 重新捆绑了悬停的“监听”方式:
var myChart = new Chart(canvas, {
options: {
events: []
}
...
});
将“事件”选项设为空列表(而不是 ['click', 'hover', etc]
)使图表成为blind'/static
,因为它将不监听任何事件。
关于javascript - Chart.js - 如何在悬停时禁用所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41952055/