javascript - Chart.js：在两行之间填充背景

Question

我有两条线的折线图。第一行是静态的，第二行是动态构建的。如果第二行的 y 值高于第一行的 y 值，我需要填充第一行和第二行之间的区域。

我使用Charts.js库来构建图表

目前我有下一个结果（在两行之间填充）：

预期结果：

标签： javascriptchart.js

Answer 1

非常骇人听闻的方式，但它给出了预期的结果：D！

小提琴-> http://jsfiddle.net/Lzo5g01n/28/

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Yellow", "Blue", "Green", "Orange", "Pink"],
    datasets: [{      
      fill: false,
      data: [0, 10, , 10, 0],
      backgroundColor: 'black',
      borderColor: 'black',
      borderWidth: 1
    }, {      
      data: [10, 10, 10, 10, 10],
      fill: true,
      backgroundColor: 'white',
      borderColor: 'black',
      borderWidth: 1
    }, {      
      data: [, 10, 18, 10, ],
      backgroundColor: 'black',
      borderColor: 'black',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        display: false,
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        display: false
      }]
    },
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    elements: {
      point: {
        radius: 0
      }
    }
  }
});