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

Question

我正在尝试通过删除strikethrough效果来更改图例的外观， legendCallback使用legendCallback函数。 我不想使用legendCallback函数的原因是因为我在chart.options.legend.onClick有自己的自chart.options.legend.onClick 。 因此，如果我使用legendCallback我将无法使用chart.options.legend.onClick 。

在仔细查看Chart.js的源代码后，我知道在Chart.Legend的绘制函数中，他们正在应用strikethrough效果。

这是 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一起正常工作

链接到我的小提琴

Answer 1

现在我已经下载了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);

}

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

更新的小提琴

Answer 2

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

        options: {
          plugins: {
            legend: {
              onClick: null,
              labels: {
                color: "white",
                font: {
                  size: 18
                }
              }
            }
          }
        }
      }