如何在Chart.js中更改隐藏的图例项的颜色而不是删除

Question

我正在查看此代码并添加了ctx.fillStyle ='red'，并得到了这个。我点击电子书隐藏其数据，而不是电子书是红色的，Microforms和Audiovisuals Mats被改为红色。

var fillText = function(x, y, legendItem, textWidth) 
{
    ctx.fillText(legendItem.text, boxWidth + (fontSize / 2) + x, y);

    if (legendItem.hidden) {
        // Strikethrough the text if hidden
        //ctx.beginPath();
        //ctx.lineWidth = 2;
        //ctx.moveTo(boxWidth + (fontSize / 2) + x, y + (fontSize / 2));                                                
        //ctx.lineTo(boxWidth + (fontSize / 2) + x + textWidth, y + (fontSize / 2));
        //ctx.stroke();
        ctx.fillStyle = 'red'; //added here                                                
    }                                
};

Answer 1

如果您查看fillStyle doc on MDN：

  

Canvas 2D API的CanvasRenderingContext2D.fillStyle属性指定要在形状内使用的颜色或样式。

因此它会对下一个形状产生影响（，例如文字来自 fillText）。

<小时/> 在写下文本之前，您需要更改文本的样式。

使用你在问题中提出的相同功能：

var fillText = function(x, y, legendItem, textWidth) 
{
    // We store the current fillStyle
    var prevFillStyle = ctx.fillStyle;

    if (legendItem.hidden) {
        // If the item is hidden, we change the fillStyle to red
        ctx.fillStyle = "red";
    }

    // The legend label is written here
    ctx.fillText(legendItem.text, boxWidth + (fontSize / 2) + x, y);

    if (legendItem.hidden) {
        // We comment the stroke part -- as you did
        //ctx.beginPath();
        //ctx.lineWidth = 2;
        //ctx.moveTo(boxWidth + (fontSize / 2) + x, y + (fontSize / 2));
        //ctx.lineTo(boxWidth + (fontSize / 2) + x + textWidth, y + (fontSize / 2));
        //ctx.stroke();

        // And then we put the fillStyle back to its previous value
        ctx.fillStyle = prevFillStyle;                                              
    }                                
};

以下是最终结果：