chart.JS我想为每个Y轴值网格线颜色添加不同的颜色

时间:2016-11-10 10:35:07

标签: javascript asp.net-mvc-4 chart.js react-chartjs

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

<receiver android:name=".auxiliary.NotificationBroadcastReceiver">
            <intent-filter>
                <action android:name="notification_cancelled"/>
            </intent-filter>
        </receiver>

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

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

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

请指导我。

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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