Javascript - Chart.js mit ansprechender Farbverlaufslinie Füllung

Question

Wenn ich Liniendiagramm im Vollbildfenster erzeuge, sind angezeigte Farben im deklarierten Radius, aber wenn ich versuche, die Fenstergröße zu ändern, wird das Diagramm richtig skaliert, aber Farbverläufe sind durcheinander. Ich versuche, dieses Problem über Zuhörer zu lösen, aber es funktioniert nicht.

Wer hat Ideen?

Hier ist mein Code:

var chrt = document.getElementById("mycanvas"); 
var ctx = chrt.getContext("2d"); 
var gradient = ctx.createLinearGradient(300, 0, 300, 600); 
gradient.addColorStop(0, 'black'); 
gradient.addColorStop(0.25, 'red'); 
gradient.addColorStop(0.5, 'orange'); 
gradient.addColorStop(0.75, 'yellow'); 
gradient.addColorStop(1, 'green'); 
mycanvas.addEventListener("resize", gradient_declaration); 

function gradient_declaration() { 
    var w = mycanvas.innerWidth; 
    var h = mycanvas.innerHeight; 
    if (gradient) { gradient.destroy(); } else { 
     var gradient = ctx.createLinearGradient(w/2, 0, w/2, h); 
     gradient.addColorStop(0, 'black'); 
     gradient.addColorStop(0.25, 'red'); 
     gradient.addColorStop(0.5, 'orange'); 
     gradient.addColorStop(0.75, 'yellow'); 
     gradient.addColorStop(1, 'green'); 
    } 
} 

Answer 1

Es ist wahrscheinlich zu spät für Sie, aber ich kam in der gleichen Ausgabe. Die Art und Weise, wie ich es gelöst habe, war ein Inline-Plugin zu erstellen, das den Gradienten jedes Mal neu berechnet, wenn sich das Layout ändert (z. B. Größenänderung, Datenänderung usw.)

var chart2 = new Chart(ctx, { 
    plugins: [ 
    { 
     id: "responsiveGradient", 

     afterLayout: function(chart, options) { 
     var scales = chart.scales; 

     // create a linear gradient with the dimentions of the scale 
     var color = chart.ctx.createLinearGradient(
      scales["x-axis-0"].left, 
      scales["y-axis-0"].bottom, 
      scales["x-axis-0"].right, 
      scales["y-axis-0"].top 
     ); 
     // add gradients stops 
     color.addColorStop(0, "black"); 
     color.addColorStop(0.25, "red"); 
     color.addColorStop(0.5, "orange"); 
     color.addColorStop(0.75, "yellow"); 
     color.addColorStop(1, "green"); 
     // changes the background color option 
     chart.data.datasets[0].backgroundColor = color; 
     } 
    } 
    ] 
});