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

Question

我正在尝试通过删除 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

一起正常工作

Link 到 my fiddle

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 并只覆盖所需的部分。

Updated fiddle

Answer 2

我知道这个 post 是旧的（我不认为有规则反对 posting 在旧的 posts 上）但是如果有人遇到这个你可以简单地像这样将 onClick 设置为 null：（以及更改图例的文本颜色和大小）

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

Answer 3

我找到了更好的方法：

将 onClick 添加到图例中并将其放入：

  const index = legendItem.datasetIndex;
  const ci = legend.chart;
  const isVisible = ci.isDatasetVisible(index);
  ci.setDatasetVisibility(index, !isVisible);


  // this is where the stroke remove happens
  const ci = legend.chart;

  const fillTextValue = ci.ctx.fillText;
  ci.ctx.fillText = function fillText(x, v, b) {
    fillTextValue.bind(ci.ctx, x, v, b)();
    this.fillStyle = "rgba(0,0,0,0)"; // whatever color you like
  };

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

remove strikethrough behavior in chart.js bar chart

javascript

legend

legend-properties

chart.js

chart.js2