在两条线之间填充Chartjs答案

【问题标题】：Fill between two lines Chartjs在两条线之间填充Chartjs
【发布时间】：2021-07-12 15:40:54
【问题描述】：

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

我已阅读图表区域文档 (https://www.chartjs.org/docs/latest/charts/area.html) 和此答案 https://stackoverflow.com/a/45398867/10250051

但是，图表仍会填充 Max 线下的整个区域，而不是在 min 线处停止。

$(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
                        }
              },
          }
      }
  });
});

Wrong graph

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

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

V2.9.4

var ctx = document.getElementById('chartJSContainer').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
        }
      },
    }
  }
});

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

V3：

var ctx = document.getElementById('chartJSContainer').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: {
      y: {
        ticks: {
          beginAtZero: true
        },
        scaleLabel: {
          display: true,
          labelString: 'Energy (kW)'
        }
      },
      x: {
        scaleLabel: {
          display: true,
          labelString: 'Time'
        }
      },

    },
    pointLabels: {
      fontStyle: 'bold',
    },
    plugins: {
      filler: {
        propagate: false
      }
    },
  }
});

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.js" integrity="sha512-LlFvdZpYhQdASf4aZfSpmyHD6+waYVfJRwfJrBgki7/Uh+TXMLFYcKMRim65+o3lFsfk20vrK9sJDute7BUAUw==" crossorigin="anonymous"></script>
</body>

【讨论】：

嘿伙计，这是真的。非常感谢您的帮助:))))))