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

Posted

技术标签:

【中文标题】删除 chart.js 条形图中的删除线行为【英文标题】:remove strikethrough behavior in chart.js bar chart 【发布时间】:2019-10-03 14:02:24 【问题描述】:

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

【问题讨论】:

【参考方案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

【讨论】:

【参考方案2】:

我知道这篇文章很旧(我认为没有禁止在旧帖子上发帖的规则)但是如果有人遇到这个问题,您可以像这样简单地将 onClick 设置为 null :(以及更改图例的文本颜色和大小)

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

【讨论】:

以上是关于删除 chart.js 条形图中的删除线行为的主要内容,如果未能解决你的问题,请参考以下文章

spss如何删除堆积条形图中的某块数据

spss如何删除堆积条形图中的某块数据

如何在 Chart.js 条形图中添加左/右填充?

Chart.js:条形图点击事件

分组条形图,在 chart.js 中

如何在chart.js中为条形图绘制基线