Chart.js折线图的条件背景色高于其他数据集

Question

我正在处理具有多个数据集的折线图。我想用与其他数据集有关的背景色来填充差异。

简单地讲，如果下面的图表在其他数据集之上，则希望将其填充为绿色；如果在下面的图表中，则将其填充为红色：

在上面的示例中，（非常小的）第一部分和第三部分将显示为红色，而其他数据部分应显示为绿色。

我见过an example，当值降至某个值（例如零）以下时，其他人也达到了这一目的。但是我似乎无法调整代码库来检查其他数据集。

这是目前的核心JS：

var myChart = new Chart(ctx, {
  type: "bar",
  data: chartData,
  options: {
    scales: chartScales,
    tooltips: {
      mode: "label"
    }
  },
  plugins: [
    {
      beforeRender: function(x, options) {
        var c = x.chart;
        var dataset = x.data.datasets[1];
        var yScale = x.scales["y-axis-0"];
        var yPos = yScale.getPixelForValue(2);

        var gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
        gradientFill.addColorStop(0, "green");
        gradientFill.addColorStop(yPos / c.height - 0.01, "green");
        gradientFill.addColorStop(yPos / c.height + 0.01, "red");
        gradientFill.addColorStop(1, "red");

        console.log(dataset._meta[0]);

        var model = x.data.datasets[1]._meta[Object.keys(dataset._meta)[0]].dataset._model;
            model.backgroundColor = gradientFill;
      }
    }
  ]
});

这里有一个带有完整（正在进行的工作）脚本的codepen：https://codepen.io/sheixt/pen/XLPMzG