Javascriptを - 私はフルスクリーンウィンドウで折れ線グラフを生成すると

Question

を充填応答グラデーションラインとChart.js、示された色は、私は、ウィンドウのサイズを変更しようとすると、グラデーションの色が台無しにされているがしかし、チャートが適切にサイズ変更され、宣言した半径です。私はリスナーを介してこの問題を解決しようとしますが、うまくいきません。

誰でもアイデアがありますか？

は、ここに私のコードです：

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

それはおそらくあなたのために遅すぎますが、私は同じ問題に出くわしました。 レイアウトを変更するたびに（サイズ変更、データ変更など）、グラデーションを再計算するインラインプラグインを作成する方法でした（サイズ変更、データ変更など）

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