ng2-charts：设置颜色不起作用答案

【问题标题】：ng2-charts: Setting colors not workingng2-charts：设置颜色不起作用
【发布时间】：2017-06-25 00:56:12
【问题描述】：

我的图表定义为：

  <canvas #chart baseChart
              [data]="_chartData"
              [labels]="_chartLabels"
              [chartType]="_chartType"
              [colors]="_backgroundColors">
  </canvas>

我将颜色指定为：

private _backgroundColors:string[] = ["#345657", "#112288", "#adf444"];

除颜色外，一切正常。如果我传入这个数组，所有颜色都显示为相同的颜色，浅灰色。有人知道可能出了什么问题吗？

【问题讨论】：

标签： angular typescript ng2-charts

【解决方案1】：

可以在here找到解决方案。目前没有记录。

应该是这样的：

[{backgroundColor: ["#e84351", "#434a54", "#3ebf9b", "#4d86dc", "#f3af37"]}]

【讨论】：

【解决方案2】：

我同意上述答案，如果有人需要，我想提供详细信息。我的例子是在 PIE 图中，它也适用于其他人。

第一步：

在您的 component.ts 文件中添加以下内容

     public pieChartColors: Array < any > = [{
       backgroundColor: ['#fc5858', '#19d863', '#fdf57d'],
       borderColor: ['rgba(252, 235, 89, 0.2)', 'rgba(77, 152, 202, 0.2)', 'rgba(241, 107, 119, 0.2)']
   }];

第二步：

您的 component.html 应该如下所示：

   <canvas baseChart 
                [data]="pieChartData" 
                [labels]="pieChartLabels" 
                [chartType]="pieChartType"
                [options]="pieChartOptions"
                [plugins]="pieChartPlugins"
                [legend]="pieChartLegend"
                [colors]="pieChartColors"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"
                >
              </canvas>

【讨论】：

【解决方案3】：

应该是这样的：

[
   {
      backgroundColor:"#ffa954",

   },
   {
      borderColor:"#589b00",

   }
]

每个对象代表dataSets数组中的对应对象

【讨论】：

它仍然只是将它们全部更改为相同的颜色。
你有什么样的图表？线，酒吧？
这是一个圆环图。