由于我发现删除线非常烦人,因为它遮盖了文本,因此有时很难分辨隐藏时的图例标签是什么,我想改变行为,这样,标签不再是删除线,而是更改为灰色。
我将其用于 onclick 函数:
legend:{
onClick:function(e,legendItem,legend){
toggleDatasetVisibility(e,legendItem,legend);
}
}
对于该功能,我已经尝试过:
function toggleDatasetVisibility(e, legendItem, legend) {
const index = legendItem.datasetIndex;
const ci = mychart;
const mydataset = ci.data.datasets[index];
const isVisible = ci.isDatasetVisible(index);
ci.setDatasetVisibility(index, !isVisible);
if (ci.isDatasetVisible(index)) {
legendItem.fontColor = 'red';
legendItem.hidden = false;
} else {
legendItem.fontColor = 'gray';
legendItem.hidden = false;
}
const legendItems = legend.legendItems;
legendItems[index].textDecoration = 'none';
}
但是,我现在得到的行为是,当我单击标签并且鼠标光标仍在标签上时,标签确实会改变颜色,但是一旦我将鼠标移开,数据集就会隐藏,并且标签会恢复为删除线。
任何可以提供的帮助将不胜感激。
您尚未指定您正在使用的 Chart.js 版本,因此 我假设是最新的,但是你的代码会出现一些错误, 很容易纠正,然后点击一下就什么也没有发生 在图例颜色框上。无论如何,解决方案应该是相同的, 即使版本稍旧。
更改作为参数发送到
legendItem
处理程序的 onClick
是不是更改图例项外观的方法。也不是
legend.legendItems[index]
,实际上是同一个对象。
执行
onClick
时,legendItem
仅
用于阅读信息。
要使
toggleDatasetVisibility
中的任何更改出现在
图表,必须调用ci.update()
;或类似 ci.hide()
或
ci.show()
自己调用 update
。
但是,调用
update
会导致调用
generateLabels
,
(源代码plugin.legend.js#L675)
并在那里重新计算图例项和那些重新计算的值
用于显示图例标签。
解决方案是对
labelItems
进行任何更改
在函数 options.plugins.legend.labels.generateLabels
中,考虑到
考虑标签的状态(即隐藏):
const _defaultGenerateLabels = Chart.defaults.plugins.legend.labels.generateLabels;
function generateLabels(...args){
const labelItems = _defaultGenerateLabels.apply(this, args);
labelItems.forEach(labelItem => {
if(labelItem.hidden){
labelItem.hidden = false;
labelItem.fontColor = '#aaa';
labelItem.fillStyle = '#ddd';
labelItem.strokeStyle = '#ccc';
}
else{
labelItem.fontColor = 'red';
}
});
return labelItems;
}
行
labelItem.fillStyle = '#ddd';
和
labelItem.strokeStyle = '#ccc';
也将相邻的颜色框设置为灰色。
对于此应用程序,无需为图例 onClick
实现处理程序。
演示片段:
const _defaultGenerateLabels = Chart.defaults.plugins.legend.labels.generateLabels;
function generateLabels(...args){
const labelItems = _defaultGenerateLabels.apply(this, args);
labelItems.forEach(labelItem => {
if(labelItem.hidden ){
labelItem.hidden = false;
labelItem.fontColor = '#aaa';
labelItem.fillStyle = '#ddd';
labelItem.strokeStyle = '#ccc';
}
else{
//labelItem.fontColor = 'red';
// better set "normal" color in options.plugins.legend.label.color
}
})
return labelItems
}
const data = {
labels: [
'January', 'February', 'March', 'April', 'May', 'June'
],
datasets: [
{
label: 'Dataset 1',
data: Array.from({length: 6}, () => Math.random()*10 - 5),
},
{
label: 'Dataset 2',
data: Array.from({length: 6}, () => Math.random()*10 - 5),
},
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
labels: {
//color: 'red',
generateLabels
}
}
}
},
};
new Chart("myChart", config);
<div style="height: 200px">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>