如何为折线图设置chart.js网格颜色

我想使用“选项”字段更改折线图的网格颜色，但我不知道从何处开始。 我第一次尝试用渐变来改变画布背景的颜色，但是效果不好

canvas{
background:linear-gradient(top, #ea1a07 0%, #f4b841 75%,#f2dd43 100%);
}

然而，我没有得到我想要的，因为正如您在上图中看到的，不仅网格是彩色的，而且x值、y标签和图表图例也是彩色的

我的chart.js选项是

options = {
        scales: {
          xAxes: [{
            gridLines: {
              color: 'rgba(171,171,171,1)',
              lineWidth: 1
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
              max: 100,
              min: 0,
              stepSize: 10
            },
            gridLines: {
              color: 'rgba(171,171,171,1)',
              lineWidth: 0.5
            }
          }]
        },
        responsive: true
      };

那么，有没有一种方法可以将网格的背景设置为3种不同的颜色（带渐变还是不带渐变）？

---

注意：我将chart.js与angular 2（ng2图表）一起使用。

最简单的方法是使用插件并配置绑定到Y轴的3个框注释（每个框都有不同的颜色）

下面是一个例子（你可以看到它的作用）

需要注意的是，注释被绘制在图表的顶部，因此您的注释颜色需要包含一些透明度才能看到其背后的内容

---

在ng2图表中使用此插件没有问题。只需在应用程序的html文件中的

中添加源代码，并将

注释

属性添加到

选项

对象中。这里是Angular2/ng2图表，演示如何使用annotations插件。

感谢您的建议，但正如我提到的，我正在使用Angular2，它是用typescript而不是javascript制作的。我没有找到很多关于如何在angular 2上使用这个插件的信息。现在我可以加入这个插件，它就像一个符咒。回答接受！你赢了我一拳。我刚刚更新了我的答案，显示它在ng2-charts中工作。再次感谢，你救了我的命。@PauloCoghi我的问题与背景颜色有关，而提供的链接指向一个关于更改网格线颜色的问题。你说得对！正在删除重复标志。：）

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Points',
      data: [
        {x: 0, y: 2},
        {x: 1, y: 3}, 
        {x: 2, y: 2},
        {x: 1.02, y: 0.4},
        {x: 0, y: -1}
      ],
      backgroundColor: 'rgba(123, 83, 252, 0.8)',
      borderColor: 'rgba(33, 232, 234, 1)',
      borderWidth: 1,
      fill: false,
    }],
  },
  options: {
    title: {
      display: true,
      text: 'Chart.js - Gridline Background',
    },
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
        ticks: {
          min: -1,
          max: 8,
          stepSize: 1,
          fixedStepSize: 1,
        },
        gridLines: {
          color: 'rgba(171,171,171,1)',
          lineWidth: 1
        }
      }],
      yAxes: [{
        afterUpdate: function(scaleInstance) {
          console.dir(scaleInstance);
        },
        ticks: {
          min: -2,
          max: 4,
          stepSize: 1,
          fixedStepSize: 1,
        },
        gridLines: {
          color: 'rgba(171,171,171,1)',
          lineWidth: 0.5
        }
      }]
    },
    annotation: {
      annotations: [{
        type: 'box',
        yScaleID: 'y-axis-0',
        yMin:  1,
        yMax: 4,
        borderColor: 'rgba(255, 51, 51, 0.25)',
        borderWidth: 2,
        backgroundColor: 'rgba(255, 51, 51, 0.25)',
      }, {
        type: 'box',
        yScaleID: 'y-axis-0',
        yMin:  -1,
        yMax: 1,
        borderColor: 'rgba(255, 255, 0, 0.25)',
        borderWidth: 1,
        backgroundColor: 'rgba(255, 255, 0, 0.25)',
      }, {
        type: 'box',
        yScaleID: 'y-axis-0',
        yMin:  -2,
        yMax: -1,
        borderColor: 'rgba(0, 204, 0, 0.25)',
        borderWidth: 1,
        backgroundColor: 'rgba(0, 204, 0, 0.25)',
      }],
    }
  }
});