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

我正在看这段代码,并添加了ctx.fillStyle =’red’,并得到了它.我单击电子书以隐藏其数据,但电子表格不是红色,而是缩微格式和视听垫变为红色.

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                                                
    }                                
};

解决方法:

如果您看一下fillStyle doc on MDN：

The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color or style to use inside shapes.

因此,它将对下一个形状(例如通过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;                                              
    }                                
};

这是最终结果：

标签：chart-js,javascript
来源： https://codeday.me/bug/20191026/1940372.html