我正在尝试通过删除strikethrough
效果来更改图例的外观,而不使用chart.js中的legendCallback
函数。我不想使用legendCallback
函数的原因是我在chart.options.legend.onClick
中有自己的自定义。因此,如果我使用legendCallback
,我将无法使用chart.options.legend.onClick
。
在仔细查看Chart.js
的源代码后,我了解到在Chart.Legend
的绘图函数内部,他们正在应用strikethrough
效果。
Here is the link to plugin.legend.js
下面是应用样式的代码
var fillText = function(x, y, legendItem, textWidth) {
var halfFontSize = fontSize / 2;
var xLeft = boxWidth + halfFontSize + x;
var yMiddle = y + halfFontSize;
ctx.fillText(legendItem.text, xLeft, yMiddle);
if (legendItem.hidden) {
// Strikethrough the text if hidden
ctx.beginPath();
ctx.lineWidth = 2;
ctx.moveTo(xLeft, yMiddle);
ctx.lineTo(xLeft + textWidth, yMiddle);
ctx.stroke();
}
};
我想知道我们如何能够改变strikethrough
的行为,只是在图例未激活或隐藏时应用渐变效果。
在寻找解决方案时,我遇到了这个codepen,其中一些试图覆盖功能,但不幸的是,它现在与chart.js version 2.7.3
正常工作
链接到my fiddle
3条答案
按热度按时间uttx8gqw1#
现在我已经下载了chart.js的缩进版本,并做了以下更改
要更改图例框颜色,请按如下方式更改drawLegendBox函数
我知道这不是正确的方法。但是,我真的不知道如何扩展图例并覆盖所需的部分。
Updated fiddle
alen0pnh2#
我知道这个帖子是旧的(我不认为有规则反对在旧帖子上发帖),但如果有人遇到这个,你可以简单地设置onClick为null,如下所示:(以及更改图例的文本颜色和大小)
6yt4nkrj3#
我找到了一个更好的方法:
添加onClick到图例并添加以下内容: