Chart.js中的漸變太模糊折線圖

我已經在Chart.js中創建了一個帶有顏色漸變的折線圖，但顏色似乎非常模糊，我無法區分它們。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我現在的圖表。

來源

2017-07-13 RP12

嘗試添加這些站：'grd.addColorStop（0.001，「RGBA （191,255,0,1,000）'）; grd.addColorStop（0.201，'rgba（221，255，0，1.000）'）; grd.addColorStop（0.401，'rgba（255，229，0，1.000）'）; grd.addColorStop（0.601，'rgba（255，144，0，1.000）'）; grd.addColorStop（0.801，'rgba（255，50，0，1.000）'）;' – user2464424

看起來您在創建線性漸變時設置了錯誤的開始和結束座標。

本文檔可以幫助你更好地理解什麼座標應設置爲： https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

變化都x座標爲0，得到水平直線。然後，減少開始y並增加結束y以使開始和結束顏色更清晰可見。

代碼：

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

截圖：

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

來源

2017-07-13 15:05:19

謝謝，這讓我走上了正軌。我會研究是否可以更好地分離顏色。 – RP12

Chart.js中的漸變太模糊折線圖

回答

相關問題