javascript - chart.JS 我想为每个 Y 轴值网格线颜色设置不同的颜色

Question

我正在使用 MVC 4.0 和 chart.JS 来生成我的图表。我想为每个值放置 Y 轴的水平线，并通过使用以下属性成功开发它。

scaleShowGridLines = true;
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: false,

但我的实际要求是我想放置不同颜色的水平线。

scaleGridLineColor: "rgba(0,0,0,.05)"

上面的线改变水平线的颜色，但它适用于所有线。

请指导我。

Answer 1

scales您可以通过添加配置来为水平和垂直网格线设置单独的颜色options：

scales: {
    yAxes: [{
        gridLines: {
            color: 'green'
        }
    }],
    xAxes: [{
        gridLines: {
            color: 'red'
        }  
    }]
}

Answer 2

您可以通过将颜色数组添加到 gridLines 来更改 Y 轴上的每条线。

options={{
     scales: {
         yAxes: [{
             gridLines: {
                  color: ['rgba(36, 206, 0, 0.8)', 'rgba(255, 255, 0, .8)','rgba(255, 162, 0, 0.8)','rgba(36, 206, 0, 0.8)'],
             }
          }],
      },
 }}