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

b91juud3  于 2022-11-23  发布在  Chart.js
关注(0)|答案(3)|浏览(198)

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

uttx8gqw

uttx8gqw1#

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

}

我知道这不是正确的方法。但是,我真的不知道如何扩展图例并覆盖所需的部分。
Updated fiddle

alen0pnh

alen0pnh2#

我知道这个帖子是旧的(我不认为有规则反对在旧帖子上发帖),但如果有人遇到这个,你可以简单地设置onClick为null,如下所示:(以及更改图例的文本颜色和大小)

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

6yt4nkrj3#

我找到了一个更好的方法:
添加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)"; // transparent color to set it invisible
  };

相关问题