如何通过更改数据来更改甜甜圈图切片的颜色

时间:2018-08-02 07:59:30

标签: chart.js

我已经用chart.js绘制了一个甜甜圈图,现在我想参考数据更改甜甜圈图的颜色。

这是我的饼图代码

 buildAlarmSummaryChart(data, label) {
    this.AlarmSummaryChart = new Chart('alarmSummary', {
      type: 'doughnut',
      data: {
        labels: label,
        datasets: [{
          label: 'Alarm ',
          innerRadius: '82%',
          data: data,
          backgroundColor: [
            'rgba(255,204,0,1)',
            'rgba(255,153,0,1)',
            'rgba(255,0,0,1)',
            'rgba(0,102,0,1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        pieceLabel: {
          // tslint:disable-next-line:semicolon
          render: 'value',
          fontColor: '#000',
          fontSize: 22,
          fontStyle: 'bold',
          position: 'inside',
          segment: true,
          arc: true
        },
        legend: {
          labels: {
            fontColor: 'black',
            fontSize: 16,
          },
        },
        cutoutPercentage: 58,
        title: {
          text: 'Alarm Summary',
          display:  true,
          fontSize: 23,
          fontColor: '#000'
        }
      }
    });
  }

我希望更改图表的背景颜色

如果数据具有1级,2级,则颜色应该是我设法做到的黄色和橙色,但是如果图表显示没有警报,则应该选择绿色,如果没有数据,则图表应该显示灰色。

请有人对此提供帮助

0 个答案:

没有答案
相关问题