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

我查看了这段代码，添加了ctx.fillStyle='red'，得到了这个。我点击电子书来隐藏它的数据，但电子书不是红色的，缩微胶片和视听垫被改成了红色

如果您查看以下内容：

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

因此，它将对下一个形状产生影响（例如通过

填充文本

生成的文本）。

---

在写之前，你需要更改文本的样式

使用与问题相同的功能：

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

以下是最终结果：

---

您是否可以通过编辑问题或添加指向isntance的链接来添加复制错误的完整代码。从您当前的情况来看，我们不知道如何以及在何处调用

fillText（）

，然后无法帮助您。我在代码中没有做任何特殊的操作。您正在查看的代码位于charts.js中，可以在网上找到。为了得到这个结果，我在charts.js中做了这些更改；它可以直接访问Chart.js。谢谢！工作起来很有魅力！令人惊讶的是，在react-chartjs-2中有可能重现同样的行为吗？

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