javascript - 如何使 Chart.js 中的背景颜色与相反顺序的 y 轴匹配？

Question

我正在尝试让我的背景颜色在 Chart.js 中正常工作。我已经颠倒了 y 轴刻度的顺序。现在我的背景颜色也被翻转了。它从边界线填充到图表的顶部，而不是像我希望的那样从边界线填充到x轴。

这里is my jsFiddle 。我的代码是:

var options = {
  type: 'line',
  data: {
    labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    datasets: [
        {
          label: 'Rank',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        backgroundColor: "#8FBC8F"
        }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: true
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

我通读了 Chart.js 文档，但没有成功，这让我认为这可能是不可能的。我想看看其他人是否遇到过这个问题以及他们是否找到了解决方案。感谢您的帮助!

Answer 1

尝试添加 fill: 'start'。

检查

    var options = {      type: 'line',      data: {      labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],      datasets: [            {              label: 'Rank',              data: [12, 19, 3, 5, 2, 3],              borderWidth: 1,              backgroundColor: "#8FBC8F",              fill: 'start'            }            ]      },      options: {        scales: {            yAxes: [{            ticks: {                        reverse: true            }          }]        }      }    }    var ctx = document.getElementById('chartJSContainer').getContext('2d');    new Chart(ctx, options);