Gradient Liniendiagramm mit ChartJS

Question

Ich habe zahlreiche Beiträge, wie man Gradienten füllen den Bereich unter dem Diagramm, aber ich möchte, dies tun gefunden?

Answer 1

Es ist irgendwie machbar. Ein einfacher Ansatz, der unten vorgestellt wird, setzt nur einen Datensatz voraus (es sollte jedoch einfach sein, den Ansatz für die Verarbeitung von mehr Datensätzen zu erweitern). Die Idee ist wie folgt. Wir werden ein Plugin erstellen, das die beforeUpdate-Methode überschreiben wird (die zu Beginn jedes Updates aufgerufen wird). Zu Beginn jedes Updates werden die genauen Y-Pixel der Min- und Max-Werte des Datensatzes berechnet. Ein vertikaler linearer Farbverlauf wird dann aus dem Kontext der Zeichenfläche unter Verwendung von createLinearGradient erzeugt, mit einer Art von Rot für das Y-Pixel, das dem Min-Wert des Datensatzes entspricht, und einer jazzigen Art von Blau für das Y-Pixel, das dem Maximalwert entspricht des Datensatzes. Sehen Sie sich den kommentierten Code für weitere Informationen an. Es kann einige Störungen geben, wenn es darum geht, über Punkte und Legenden zu schweben, auf die ich nicht besonders scharf bin. A working fiddle is here und der Code ist auch unten verfügbar.

var gradientLinePlugin = { 
 
    // Called at start of update. 
 
    beforeUpdate: function(chartInstance) { 
 
    if (chartInstance.options.linearGradientLine) { 
 
     // The context, needed for the creation of the linear gradient. 
 
     var ctx = chartInstance.chart.ctx; 
 
     // The first (and, assuming, only) dataset. 
 
     var dataset = chartInstance.data.datasets[0]; 
 
     // Calculate min and max values of the dataset. 
 
     var minValue = Number.MAX_VALUE; 
 
     var maxValue = Number.MIN_VALUE; 
 
     for (var i = 0; i < dataset.data.length; ++i) { 
 
     if (minValue > dataset.data[i]) 
 
      minValue = dataset.data[i]; 
 
     if (maxValue < dataset.data[i]) 
 
      maxValue = dataset.data[i]; 
 
     } 
 
     // Calculate Y pixels for min and max values. 
 
     var yAxis = chartInstance.scales['y-axis-0']; 
 
     var minValueYPixel = yAxis.getPixelForValue(minValue); 
 
     var maxValueYPixel = yAxis.getPixelForValue(maxValue); 
 
     // Create the gradient. 
 
     var gradient = ctx.createLinearGradient(0, minValueYPixel, 0, maxValueYPixel); 
 
     // A kind of red for min. 
 
     gradient.addColorStop(0, 'rgba(231, 18, 143, 1.0)'); 
 
     // A kind of blue for max. 
 
     gradient.addColorStop(1, 'rgba(0, 173, 238, 1.0)'); 
 
     // Assign the gradient to the dataset's border color. 
 
     dataset.borderColor = gradient; 
 
     // Uncomment this for some effects, especially together with commenting the `fill: false` option below. 
 
     // dataset.backgroundColor = gradient; 
 
    } 
 
    } 
 
}; 
 

 
Chart.pluginService.register(gradientLinePlugin); 
 

 
var ctx = document.getElementById("myChart"); 
 

 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
    labels: ["First", "Second", "Third", "Fourth", "Fifth"], 
 
    datasets: [{ 
 
     label: 'My Sample Dataset', 
 
     data: [20, 30, 50, 10, 40], 
 
     // No curves. 
 
     tension: 0, 
 
     // No fill under the line. 
 
     fill: false 
 
    }], 
 
    }, 
 
    options: { 
 
    // Option for coloring the line with a gradient. 
 
    linearGradientLine: true, 
 
    scales: { 
 
     yAxes: [{ 
 
     ticks: { 
 
      min: 0, 
 
      max: 100, 
 
      stepSize: 20 
 
     } 
 
     }] 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
<canvas id="myChart" width="400" height="200"></canvas>

Es gibt auch eine pluginless Methode, genannt here, aber das Verfahren fehlt. Gemäß dieser Methode müsste man borderColor auf einen Farbverlauf setzen, der vor der Erstellung des Diagramms hätte erstellt werden sollen. Der Gradient wird statisch berechnet und passt niemals in einen beliebigen Bereich oder reagiert auf die Größenänderung wie sie ist.