Chart.js 带ChartJS的梯度折线图

我已经找到了很多关于如何在图表下方填充渐变区域的帖子，但我想这样做：

---

这在ChartJS中可行吗？

这在某种程度上是可行的。下面介绍的一种简单方法假设只有一个数据集（不过，扩展该方法以处理更多数据集应该很容易）。想法如下。我们将创建一个插件，该插件将覆盖

beforeUpdate

方法（在每次更新开始时调用）。在每次更新开始时，将计算数据集的最小值和最大值的精确Y像素。然后使用从画布上下文创建垂直线性渐变，其中Y像素的颜色为红色，对应于数据集的最小值，Y像素的颜色为蓝色，对应于数据集的最大值。查看注释代码以了解更多信息。关于悬停在点和图例颜色上可能会有一些小问题，我不太热衷于研究这些问题。下面也提供了代码

var gradientLinePlugin={
//在更新开始时调用。
更新前：函数（chartInstance）{
if（chartInstance.options.linearGradientLine）{
//创建线性渐变所需的上下文。
var ctx=chartInstance.chart.ctx；
//第一个（假设是唯一的）数据集。
var dataset=chartInstance.data.datasets[0]；
//计算数据集的最小值和最大值。
var minValue=Number.MAX_值；
var maxValue=Number.MIN_值；
对于（变量i=0；idataset.data[i]）
minValue=dataset.data[i]；
if（maxValue

太棒了！非常感谢，我整个上午都在努力，最后还是放弃了。我也遇到了这些困难，所以我写了教程来帮助其他人，如果他们需要的话，你可以在这里查看