添加未在 ng2-charts 中分配的多个数据集和颜色答案

【问题标题】：Adding multiple dataset and colors not being assigned in ng2-charts添加未在 ng2-charts 中分配的多个数据集和颜色
【发布时间】：2020-04-04 21:34:01
【问题描述】：

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

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

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)

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

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

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>

颜色未设置到图表的原因是什么？我是否缺少颜色数组的条目？我设置数据集的方式不对？

感谢您的帮助

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案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)']
}]

【讨论】：

它仍然以灰色显示图表