8. Hintergrundfarbverlauf Vertikal | Chart JS Background Color Series

In diesem Video werden wir uns darauf konzentrieren, einen linearen Farbverlauf im Hintergrund auf einem Balkendiagramm in Chart.js zu erstellen. Die Canvas-API ermöglicht es uns, die Farbe der Balken zu steuern. Mit dem Befehl createLinearGradient() können wir steuern, ob wir es horizontal, vertikal oder diagonal möchten.

Dieses Video wird sich auf einen vertikalen Farbverlaufseffekt auf den Balken konzentrieren. Mit anderen Worten wird die Hintergrundfarbe der Balken allmählich von einer Farbe zu einer anderen übergehen.

Chart.js ist im Wesentlichen eine JavaScript-Bibliothek, die eine sofort einsatzbereite Vorlage für die Canvas-API bietet. Sie zeichnet auf der Leinwand mithilfe von JavaScript-Code, den die Leinwand verstehen kann.

Understanding how to use createLinearGradient() in Chart js for gradient color effect.

The command createLinearGradient() has 4 values that controls the movement of the lines which could be vertical, horizontal or diagonal.

The 4 values to control the color movement are createLinearGradient(x0, y0, x1, y1). These values mean:

x0 = The starting point of the line on the x coordinate. The x coordinate is always from left to right. This would mean that if the width of a canvas is equal to 700 pixels and we have a x0 values of ‘0’. That would indicate that the starting point would be that the very left. If it would be 350, it would mean that the effect would take effect at the center of the canvas.

y0 = The starting point of the line on the y coordinate. The y coordinate is always from top to bottom. The higher the value the lower it would start. If as the example in the video, the height of canvas is equal to 350 pixel. And we want to start the effect at the very top we would set the y0 on ‘0’.

x1 = The width in pixels that would be affected by the createLinearGradient() command. For example, if we want to have full width of gradient color we would set the x0 on ‘0’ and the x1 on ‘700’. So that from left to right the color would impact.

y1 = the height in pixels that would be affected by the createLinearGradient() command. For example, if we want to have full height of gradient color we would set the y0 on ‘0’ and the x1 on ‘700’. So that from top to bottom of the canvas the color would impact.

In the video the focus is on creating only a linear gradient effect on a vertical level. This indicates we only need to adjust the y0 als auch y1 values. In this case we want to start at the very top which is why we set the y0 to ‘0’. Next, it needs to end at the very bottom of the canvas which is why we set the y1 on ‘350’.

Wie man weiche Codewerte für den Verlaufseffekt in Chart.js verwendet

Während die aktuelle Methode auf fest codierten Pixelwerten basiert, gibt es eine fortgeschrittene Möglichkeit, dies mit weichen Codewerten zu tun, indem man das chartArea-Objekt abruft.

Sobald Sie verstehen, wie die fest codierte Methode funktioniert, ist es Zeit, die weiche Codierung zu verstehen. Das folgende Video behandelt dies gut. In diesem Fall müssen wir das chartArea -Objekt verstehen und den Befehl scales getPixelForTick verwenden, um die Pixelwerte zu extrahieren.