Chart.js基于值散点图填充图表的部分

如何解决Chart.js基于值散点图填充图表的部分

我正在尝试在Chart.js中重现此图像。

我的问题是如何根据图像中的线值填充区域？目前，数据已正确显示，但无法管理颜色。

这是我目前的代码：

var xPoints = [];
var yPoints = [];
var storage = [];
for(var i=0; i<data.cost.length; i++)
        { 
            xPoints[i] = data.electricity[i];
            yPoints[i] = data.cost[i];
            x = xPoints[i];
            y = yPoints[i];
            var coordinates = {x: x,y: y};
            storage.push(coordinates); 
        }
var ctx = document.getElementById("myChart");
var chart_wrapper = document.getElementsByClassName("chart-wrapper");

 var myChart = new Chart(ctx,{
          type: "scatter",data: {
            
            datasets: [
              {
                label: label,data: storage,yAxisID: "primary",borderWidth: 4,type: "line",backgroundColor: "rgba(107,80,255)",},],options: options }});

谢谢

解决方法

答案：

这解决了我的问题。

plugins: [{
            beforeRender: function (x,options) {
                var c = x.chart
                var dataset = x.data.datasets[0];
                var yScale = x.scales['primary'];
                var yPos = yScale.getPixelForValue(0);

                var gradientFill = c.ctx.createLinearGradient(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');

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