Javascript 在两行之间填充Chartjs

我想画一个有4条线的图表，在两条特定的线之间填充Max和Min。我使用的库是Javascript Chartjs

我已经阅读了图表区文档（）和这个答案

但是，图形仍然填充最大线下的整个区域，而不是在最小线处停止

$(document).ready(function(){
  var ctx = document.getElementById('mixed-api').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: [1,2,3,4,5,6,7],
          datasets: [
          
            {
              label: 'Median',
              data: [20, 20, 20, 20, 20, 20, 20],
              fill: false,
              borderColor: 'rgb(0, 0, 0)',
              tension: 0.1,
              //backgroundColor: 'rgba(255,193,8,0)'
            },
            {
              label: 'Min',
              data: [10, 10, 10, 10, 10, 10, 10],
              fill: false,
              borderColor: 'red',
              tension: 0.1,
              //backgroundColor: 'rgba(255,193,8,0)'
            },
            {
              label: 'Max',
              data: [30, 30, 30, 30, 30, 30, 30],
              fill: '-1',
              borderColor: 'red',
              tension: 0.1,
              backgroundColor: 'rgba(255,193,8,0.5)'
            },
            {
              label: 'Random',
              data: [5, 10, 15, 20, 25, 30, 35],
              fill: false,
              borderColor: 'rgb(75, 192, 192)',
              tension: 0.1,
              //backgroundColor: 'rgba(255,193,8,0)'
            }
          ]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  },
                  scaleLabel: {
                    display: true,
                    labelString: 'Energy (kW)'
                  }
              }],
              xAxes: [{
                scaleLabel: {
                  display: true,
                  labelString: 'Time'
                }
              }],
              pointLabels: {
                fontStyle: 'bold',
              },
              plugins: {
                        filler: {
                            propagate: false
                        }
              },
          }
      }
  });
});

---

您的代码运行良好，我唯一能想到的是您使用的是一个过时的lib版本，最新的V2（2.9.4）版本和V3版本按预期运行，请参见示例：

V2.9.4

var ctx=document.getElementById（'chartJSContainer'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[1,2,3,4,5,6,7]，
数据集：[
{
标签：'中值'，
数据：[20,20,20,20,20,20,20,20]，
填充：假，
边框颜色：“rgb（0,0,0）”，
张力：0.1，
//背景颜色：“rgba（255193,8,0）”
},
{
标签：“Min”，
数据：[10,10,10,10,10,10,10,10]，
填充：假，
边框颜色：“红色”，
张力：0.1，
//背景颜色：“rgba（255193,8,0）”
},
{
标签：“最大值”，
数据：[30,30,30,30,30,30,30,30]，
填充：'-1'，
边框颜色：“红色”，
张力：0.1，
背景颜色：“rgba（255193,8,0.5）”
},
{
标签：“随机”，
数据：[5,10,15,20,25,30,35]，
填充：假，
边框颜色：“rgb（75192192）”，
张力：0.1，
//背景颜色：“rgba（255193,8,0）”
}
]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
},
scaleLabel：{
显示：对，
标签字符串：“能量（kW）”
}
}],
xAxes：[{
scaleLabel：{
显示：对，
标签串：“时间”
}
}],
点标签：{
字体：“粗体”，
},
插件：{
填料：{
传播：假
}
},
}
}
});
嘿，伙计，这是真的。非常感谢您的帮助：(()()))