Gradient ist zu unscharf in Chart.js Liniendiagramm

Question

Ich habe ein Liniendiagramm mit einem Farbverlauf in Chart.js erstellt, aber die Farbe scheint so viel zusammen zu verwischen, ich kann nicht zwischen ihnen unterscheiden.

Es soll wie folgt aussehen:

Aber es endet wie folgt aussehen:

ich einen Gradienten erstellt, die im Inneren auf die Leinwand Diagramm angewendet wird mein JavaScript. Ich bin mir nicht sicher, ob es daran liegt, dass ich nicht genügend Farbwerte habe oder weil mein Diagramm ausgedehnt ist.

Kann mir jemand bei der Lösung helfen?

Hier ist meine JS für die Erstellung der Steigung:

// 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)'); 

Hier ist die Fiddle für meine aktuelle Chart.

Answer 1

Es sieht so aus, als ob Sie beim Erstellen des linearen Farbverlaufs die falschen Start- und Endkoordinaten festlegen.

kann diese Dokumentation helfen, besser zu verstehen, was sollten die Koordinaten festgelegt werden: beide https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

ändern x Koordinaten auf 0, gerade horizontale Linien zu erhalten. Reduzieren Sie dann den Start y und erhöhen Sie das Ende y, um die Anfangs- und Endfarben besser sichtbar zu machen.

Code:

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

Screenshot:

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