如何设置代码使图表上没有悬停效果、悬停选项、(悬停)链接等?
我正在使用 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);
};
});
为了删除所有悬停styles/tooltips
来自普通的 Chart.js:
var myChart = new Chart(canvas, {
options: {
tooltips: {enabled: false},
hover: {mode: null},
}
...
});
Chart.js 正在观察一切mousemove
画布上的事件,其中实例化了您的图表。将悬停“模式”设置为 null 似乎会覆盖画布查找匹配元素以分配激活的所有方式:hover
类至.
工具提示事件似乎是独立的,因此我必须使用这两行来使图表有效地静态。
请注意,具有这些选项的图表上的初始动画仍然有效。
更新:最新的 Chart.js 重新捆绑了“监听”悬停的方式:
var myChart = new Chart(canvas, {
options: {
events: []
}
...
});
将“事件”选项设置为空列表(而不是['click', 'hover', etc]
)制作图表blind'/static
因为它不会监听任何事件。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)