如何禁用chartjs legendclick
Pre*_*thy 18 javascript jquery chart.js
我想禁用chart.js蜘蛛图表图例点击,因为当我点击图例时,数据系列隐藏了相关的值集,如下图所示.
我的要求是我不想禁用数据集.我试过了preventDefault(); 在图表上单击但它不起作用.
我的代码示例附在下面.请检查..
<!doctype html>
<html>
<head>
<title>Radar Chart</title>
<script src="../dist/Chart.bundle.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div style="width:75%">
<canvas id="canvas"></canvas>
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
var config = {
type: 'radar',
data: {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(0,0,0,0.5)",
pointBackgroundColor: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: "My Second dataset",
backgroundColor: "rgba(0,120,0,0.5)",
pointBackgroundColor: "rgba(151,187,205,1)",
hoverPointBackgroundColor: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
},]
},
options: {
legend: {
position: 'top',
onClick: (e) => e.stopPropagation()
},
title: {
display: true,
text: ''
},
scale: {
reverse: false,
gridLines: {
color: ['black']
},
ticks: {
beginAtZero: true
}
}
}
};
window.onload = function() {
window.myRadar = new Chart(document.getElementById("canvas"), config);
};
</script>
</body>
</html>
ste*_*425 44
根据文档,有一个onClick展示事件对象的图例的处理程序.如果你stopPropagation停止数据系列隐藏:
let chart = new Chart(elem.find('canvas')[0], {
type: 'line',
data: {
labels: [],
datasets: []
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
onClick: (e) => e.stopPropagation()
}
}
});
以上是ES6,如果你不使用下面支持的浏览器是较旧的ES5等效.
legend: {
onClick: function (e) {
e.stopPropagation();
}
}
Chartjs必须在legend.onClick这之后注册自己的点击事件,这就是为什么这会阻止它执行.
Q--*_*ten 19
在撰写本文时（Chart.js v3.5.1），正确答案是
options: {
plugins: {
legend: {
onClick: null
}
}
}
根据 Natan Almeida de Lima 的上述评论。将其添加为答案，因为我没有将其视为单行评论，而是在自己弄清楚之后才发现的。
- 这对我有用。 (2认同)
小智 8
另外，您可以使用null或评估false为禁用所有图例上的单击事件的任何值。
options: {
legend: {
onClick: null
}
}
注意：通过onClick在Chart.js中的以下代码上忽略点击事件（https://github.com/chartjs/Chart.js/blob/6bea15e7cf89003e3a5945a20cf1d2cc5096728e/src/plugins/plugin.legend.js#L481）
- 更简单的解决方案。好的。 (2认同)
- 选项：{ 插件：{ 图例：{ onClick：函数（事件，legendItem）{} } } } (2认同)
要覆盖单击图例项的默认行为,即在图表中显示/隐藏关联数据集,您可以使用以下选项(options为清晰起见,在内部显示):
options: {
legend: {
onClick: function(event, legendItem) {}
}
}
这是覆盖默认行为的方法,即通过提供具有相同参数的函数.根据您的要求,此函数应该有一个空体(因此,立即返回),因为单击图例项时绝对不会发生任何事情.legend.onClick在文档中查找.虽然它目前只出现在两种图表类型下,但此选项应适用于所有图表类型.
- @ ste2425显式定义一个选项将覆盖其默认值(在我们的例子中,默认值是一个隐藏或显示数据集的函数(将在点击时调用)(如果数据集在调用时分别显示或隐藏) /点击时)).这是Chart.js的一般方式.通过提供替代回调来更改回调(例如,对于工具提示).在大多数情况下,我认为你不需要搞乱事件传播. (2认同)
| 归档时间： |
|
| 查看次数： |
16182 次 |
| 最近记录： |