So ändern Sie die Farbe der ausgeblendeten Legende anstelle von Durchstreichen in Chart.js

Question

Ich habe mir diesen Code angesehen und ctx.fillStyle = 'red' hinzugefügt; und habe das Ich klicke auf eBooks, um seine Daten zu verbergen, aber anstatt dass eBooks rot sind, wurden Mikrofone und Audiovisual-Mats auf Rot geändert.

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

Wenn Sie einen Blick auf den fillStyle doc on MDN nehmen:

Die CanvasRenderingContext2D.fillStyle Eigenschaft der Canvas 2D-API gibt die Farbe oder Stil innerhalb von Formen zu verwenden.

So wird es einen Einfluss auf die nächsten Formen haben (wie Text überfillText).

---

Sie müssen den Stil des Textes ändern, bevor Sie ihn aufschreiben.

die gleiche Funktion können Sie in Ihrer Frage stellen:

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

Und hier ist das Endergebnis: