漸變線圖與ChartJS

Question

我已經找到了如何漸變填充圖表下方的區域衆多的職位，但我想這樣做：

那是可行與ChartJS？

Answer 1

它在某種程度上是可行的。下面介紹的一種簡單方法僅假設一個數據集（儘管如此，應該很容易擴展處理更多數據集的方法）。這個想法如下。我們將創建一個插件來覆蓋beforeUpdate方法（在每次更新開始時調用該方法）。在每次更新開始時，計算數據集的最小值和最大值的確切Y像素。然後使用createLinearGradient從畫布的上下文創建一個垂直線性漸變，其中Y像素的一種紅色對應於數據集的最小值，對於Y像素的對應於最大值的爵士類型的藍色的數據集。查看評論的代碼以獲取更多信息。關於懸停點和傳奇着色可能會有一些小問題，我並不十分熱衷於研究。 A working fiddle is here以下代碼也可用。

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>

還有一個pluginless方法，提到here，但該方法是缺乏的。根據該方法，人們必須將borderColor設置爲應在創建圖表之前創建的漸變。梯度是靜態計算的，並且不會適合任意範圍或按原樣響應調整大小。