我想把不同的颜色为每个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

您可以通过向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)'],
             }
          }],
      },
 }}

Answer 2

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

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