Verlaufsfarbe für jeden Balken in einem Balkendiagramm ChartJS mit

Question

Ich versuche, ein Balkendiagramm mit ChartJS zu erstellen, die wie folgt aussehen:

Ich möchte wissen, wie kann ich Gradient hinzufügen Farbe für jeweils der Bars getrennt, und nach ihren Höhen.

Ich fand eine sehr enge Lösung here, aber es setzt createLinearGradient für den gesamten Graph, nicht für einzelne Bars.

Auch this Lösung ist näher, wenn ich Gradienten für jeden Balken erstellen, aber dann möchte ich Gradienten entsprechend der Balkenhöhe einstellen.

Gibt es eine Möglichkeit, stopPoints entsprechend der Balkenhöhe anzugeben, und nicht Koordinaten auf dem <canvas /> Element?

Oder vielleicht ein Weg zu berechnen Grafikkoordinaten nach einer bestimmten Balkenhöhe?

Vielen Dank im Voraus :)

Answer 1

Um eine Wirkung zu erhalten, die in Ihrer bereitgestellten Beispielbild sieht aus wie Sie ein gestapeltes Balkendiagramme mit drei Datensatz nutzen könnten. Schau dir den Code an, um zu sehen, was ich meine.

var bar_ctx = document.getElementById('bar-chart').getContext('2d'); 
 

 
var bar_chart = new Chart(bar_ctx, { 
 
    type: 'bar', 
 
    data: { 
 
    labels: ["1", "2", "3", "4", "5", "6"], 
 
    datasets: [{ 
 
     label: 'test0', 
 
     data: [3, 4, 7, 3, 6, 2], 
 
     backgroundColor: 'deepskyblue', 
 
     }, { 
 
     label: 'test1', 
 
     data: [2, 9, 3, 3, 4, 8], 
 
     backgroundColor: 'skyblue' 
 
     }, 
 
     { 
 
     label: 'test2', 
 
     data: [2, 9, 3, 3, 4, 8], 
 
     backgroundColor: 'powderblue' 
 
     } 
 
    ] 
 
    }, 
 
    options: { 
 
    legend: { 
 
     display: false 
 
    }, 
 
    scales: { 
 
     yAxes: [{ 
 
     stacked: true, 
 
     ticks: { 
 
      beginAtZero: true 
 
     } 
 
     }], 
 
     xAxes: [{ 
 
     stacked: true, 
 
     }] 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> 
 

 
<canvas id="bar-chart"></canvas>