Javascript 删除chart.js条形图中的删除线行为

我试图通过删除删除删除线的效果来改变图例的外观，但不使用chart.js中的

legendCallback

函数。我之所以不想使用

legendCallback

函数，是因为我在

chart.options.legend.onClick

中有自己的自定义项。因此，如果我使用

legendCallback

，我将无法使用

chart.options.legend.onClick

仔细查看

Chart.js

的源代码后，我知道在

Chart.Legend

的绘图函数中，他们正在应用删除线效果

下面是应用样式的一段代码

    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();
            }
        };

我想知道当图例未激活或隐藏时，我们如何才能改变删除线的行为，只要应用淡入淡出效果即可

在搜索解决方案时，我遇到了这个问题，在某些情况下，我试图覆盖该功能，但不幸的是，它现在在

chart.js版本2.7.3

---

链接到

目前，我已下载了缩进版的chart.js，并做了以下更改

var fillText = function(x, y, legendItem, textWidth) {
            var halfFontSize = fontSize / 2;
            var xLeft = boxWidth + halfFontSize + x;
            var yMiddle = y + halfFontSize;




        if (legendItem.hidden) {
            // Strikethrough the text if hidden , comment out the strikethrough code
            /*ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.moveTo(xLeft, yMiddle);
            ctx.lineTo(xLeft + textWidth, yMiddle);
            ctx.stroke();*/


           ctx.fillStyle = Chart.helpers.color(fontColor).lighten(0.75).rgbString();

        }
            ctx.fillText(legendItem.text, xLeft, yMiddle);
            ctx.fillStyle = fontColor;

    };

要更改图例框颜色，请按如下所示更改drawLegendBox功能

if(legendItem.hidden){

    ctx.fillStyle = "#D6D6D6";
    ctx.strokeStyle = "#D6D6D6";

}else{

     ctx.fillStyle = valueOrDefault$d(legendItem.fillStyle, defaultColor);
     ctx.strokeStyle = valueOrDefault$d(legendItem.strokeStyle, defaultColor);

}

我明白这不是正确的做法。但是，我真的不知道如何扩展图例并覆盖所需的部分

---

目前，我下载了缩进版的chart.js，并做了以下更改

var fillText = function(x, y, legendItem, textWidth) {
            var halfFontSize = fontSize / 2;
            var xLeft = boxWidth + halfFontSize + x;
            var yMiddle = y + halfFontSize;




        if (legendItem.hidden) {
            // Strikethrough the text if hidden , comment out the strikethrough code
            /*ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.moveTo(xLeft, yMiddle);
            ctx.lineTo(xLeft + textWidth, yMiddle);
            ctx.stroke();*/


           ctx.fillStyle = Chart.helpers.color(fontColor).lighten(0.75).rgbString();

        }
            ctx.fillText(legendItem.text, xLeft, yMiddle);
            ctx.fillStyle = fontColor;

    };

要更改图例框颜色，请按如下所示更改drawLegendBox功能

if(legendItem.hidden){

    ctx.fillStyle = "#D6D6D6";
    ctx.strokeStyle = "#D6D6D6";

}else{

     ctx.fillStyle = valueOrDefault$d(legendItem.fillStyle, defaultColor);
     ctx.strokeStyle = valueOrDefault$d(legendItem.strokeStyle, defaultColor);

}

我明白这不是正确的做法。但是，我真的不知道如何扩展图例并覆盖所需的部分

我知道这篇文章很旧（我认为没有禁止在旧文章上发表的规则），但如果有人遇到这种情况，你可以简单地将onClick设置为null，如下所示：（以及更改图例的文本颜色和大小）

我知道这篇文章很老（我不认为有规则禁止在老文章上发表），但如果有人遇到这种情况，你可以简单地将onClick设置为null，如下所示：（以及更改图例的文本颜色和大小）