添加多个未在ng2图表中分配的数据集和颜色

Question

[我正在制作一个应用程序，可以在其中设置页面上的选项，并使这些选项收集数据集，以便可以在折线图中显示它们。

使用此方法从服务器收集数据：

this.checkedList.forEach(item => {
  var inn = {
    action: item.action,
    moneda: item.moneda
  }

  this.http.post(URL, Object.assign(this.options, inn)).subscribe(data => {
    Object.keys(data).forEach(function(key) {
      if (data[key]["val"] == null) {
        data[key]["val"] = 0;
      } else {
        dataC.push(data[key]["val"])
      }
    })
    var val: Object = {
      data: dataC,
      label: 'Pesos'
    }
    newData.push(val)
    dataC = []
  })
})

this.ChartData = newData
console.log(this.ChartData)

In this.ChartData是要在图表上显示的数据的数组。由于图表确实显示了数据，因此已正确实现了数据集，但是所有图表的颜色都是灰色，如下所示：

如果我的ng2-charts的Colors数组是这样的：

ChartColors: Array<any> = [{
  backgroundColor: 'rgba(0, 102, 235, 0.3)',
  borderColor: '#1862c6',
  pointBackgroundColor: 'rgba(0, 102, 235, 1)',
  pointBorderColor: '#1862c6',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(0, 102, 235, 0.4)'
}, {
  backgroundColor: 'rgba(235, 78, 54, 0.2)',
  borderColor: '#ff5723',
  pointBackgroundColor: 'rgba(235, 78, 54, 1)',
  pointBorderColor: '#ff5723',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(235, 78, 54, 0.8)'
}, {
  backgroundColor: 'rgba(67, 210, 158, 0.2)',
  borderColor: '#00caac',
  pointBackgroundColor: 'rgba(67, 210, 158, 1)',
  pointBorderColor: '#00caac',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(67, 210, 158, 0.8)'
}]

图表的HTML如下：

<div class="chk-block-content widget-body todo-widget">
  <canvas height="100" baseChart [datasets]="ChartData" [labels]="ChartLabels" [options]="ChartOptions" [colors]="ChartColors" [legend]="ChartLegend" [chartType]="ChartType"></canvas>
</div>

未将颜色设置为图表的原因是什么？我是否缺少颜色数组的条目？我设置数据集的方式是错误的？

感谢您的帮助

Answer 1

您应该更改定义ChartColors的方式。该数组应包含一个对象，并且其每个属性都应定义为值数组。

ChartColors = [{
  backgroundColor: ['rgba(0, 102, 235, 0.3)', 'rgba(235, 78, 54, 0.2)', 'rgba(67, 210, 158, 0.2)'],
  borderColor: ['#1862c6', '#ff5723', '#00caac'],
  pointBackgroundColor: ['rgba(0, 102, 235, 1)', 'rgba(235, 78, 54, 1)', 'rgba(67, 210, 158, 1)'],
  pointBorderColor: ['#1862c6', '#ff5723', '#00caac'],
  pointHoverBackgroundColor: ['#fff', '#fff', '#fff'],
  pointHoverBorderColor: ['rgba(0, 102, 235, 0.4)', 'rgba(235, 78, 54, 0.8)', 'rgba(67, 210, 158, 0.8)']
}]