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

只需尝试添加填充：“开始”。

检查


    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);

如何使Chart.js中的backgroundColor与反转的y轴匹配？

1 个答案: