chart.js - 使用 ChartJS 绘制渐变折线图

Question

我发现了很多关于如何渐变填充图表下方区域的帖子，但我想这样做:

这可以用 ChartJS 实现吗？

Answer 1

这在某种程度上是可行的。下面介绍的一种简单方法仅假设一个数据集(不过，应该很容易扩展该方法以处理更多数据集)。想法如下。我们将创建一个插件来覆盖 beforeUpdate 方法(该方法在每次更新开始时调用)。每次更新开始时，都会计算数据集最小值和最大值的确切 Y 像素。然后使用createLinearGradient从 Canvas 的上下文创建垂直线性渐变。 ，其中 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>

还有一个无插件的方法，提到了here ，但缺乏这种方法。根据该方法，必须将 borderColor 设置为应在创建图表之前创建的渐变。梯度是静态计算的，永远不会适应任意范围或按原样响应调整大小。