Chart.jsの線グラフでグラデーションがぼやけている

Question

Chart.jsにカラーグラデーションを持つ折れ線グラフを作成しましたが、色があまりにもぼやけて見えますが、区別できません。

このように見えるはずです：

しかし、それはこのように見える終わる：

私は私の内部のキャンバスチャートに適用されたグラデーションを作成JavaScript。私は十分な色の値を持っていないか、または私のグラフが伸びているので、それがあるかどうかは分かりません。

誰かが私を助けてこれを解決できますか？ここで

は勾配を作成するための私のJSです：ここでは

// Create gradient 
grd = ctx.createLinearGradient(170.000, 600.000, 150.000, 0.000); 

// Add colors 
grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)'); 
grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)'); 
grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)'); 
grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)'); 
grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)'); 
grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)'); 

は私の現在のチャートのFiddleです。

Answer 1

リニアグラデーションを作成するときに間違った開始座標と終了座標を設定しているようです。まっすぐな水平線を得るために、 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

変更の両方xが0に座標：

このドキュメントでは、座標に設定すべきかをよりよく理解に役立つことがあります。次に、開始を減らし、開始と終了の色がより見えるように末尾をyに増やします。

コード：

grd = ctx.createLinearGradient(0.000, 350.000, 0.000, 100.000); 

スクリーンショット：

JSFiddle：
https://jsfiddle.net/xg2k82rp/3/