ChartJS的渐变折线图

我发现了很多有关如何渐变填充图表下方区域的文章，但我想这样做：

ChartJS可以做到吗？

这是可行的。下面介绍的一种简单方法仅假设一个数据集（不过，应该很容易扩展该方法以处理更多数据集）。这个想法如下。我们将创建一个插件来覆盖该beforeUpdate方法（在每次更新开始时调用）。在每次更新开始时，都会计算出数据集的最小值和最大值的确切Y像素。然后使用createLinearGradient，从画布的上下文中创建垂直线性渐变，Y像素的红色对应于数据集的最小值，Y像素的蓝色对应于最大值数据集。查看注释的代码以获取更多信息。关于将鼠标悬停在点和图例颜色上可能会有一些小故障，我不太想研究。有用的小提琴在这里，下面也提供代码。

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
        }
      }]
    }
  }
});