饼图中的Chart.js ng2-charts颜色未显示答案

【问题标题】：Chart.js ng2-charts colors in pie chart not showing饼图中的Chart.js ng2-charts颜色未显示
【发布时间】：2017-06-20 13:37:21
【问题描述】：

我正在使用 ng-2 图表，虽然我可以正确显示饼图，但我无法更改不同饼图的颜色。

似乎存在一个错误，即所有饼图都获得了对象中声明的第一种颜色（在本例中为红色）。

我的 component.ts 看起来像：

public pieChartColors:Array<any> = [
  {
    backgroundColor: 'red',
    borderColor: 'rgba(135,206,250,1)',
  },
  {
    backgroundColor: 'yellow',
    borderColor: 'rgba(106,90,205,1)',
  },
  {
    backgroundColor: 'rgba(148,159,177,0.2)',
    borderColor: 'rgba(148,159,177,1)',

  }
];

// Pie
public pieChartLabels:string[] = ['First Set', 'Sales', 'Mail'];
public pieChartData:number[] = [300, 500, 100];
public pieChartType:string = 'pie';

我的看法：

<canvas
  [chartType]="pieChartType"
  [colors]="pieChartColors"
  [data]="pieChartData"
  [labels]="pieChartLabels"
  baseChart
></canvas>

【问题讨论】：

标签： javascript angular charts chart.js

【解决方案1】：

试试下面的方法...

public pieChartColors: Array < any > = [{
   backgroundColor: ['red', 'yellow', 'rgba(148,159,177,0.2)'],
   borderColor: ['rgba(135,206,250,1)', 'rgba(106,90,205,1)', 'rgba(148,159,177,1)']
}];
...

^{不是 'ng2-charts' 专业人士，但应该可以。}

【讨论】：

非常感谢您！为什么文档说有一个对象数组呢？
我猜，这是针对多个数据集的。但是由于您使用的是单个数据集，因此您应该使用具有多个背景/边框颜色数组的单个对象

【解决方案2】：

通过在 HTML 模板中添加 *ngIf="pieChartLabels && pieChartData" 条件解决了这个问题：

<div class="card">
    <div class="card-header">
        Pie Chart
    </div>
    <div class="card-body">
        <div class="chart-wrapper" *ngIf="pieChartLabels && pieChartData">
            <canvas baseChart class="chart"
                [data]="pieChartData"
                [labels]="pieChartLabels"
                [chartType]="pieChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)">
            </canvas>
        </div>
    </div>
</div>

【讨论】：

使用 .ts 文件中的虚拟数据，一切正常。在开始使用来自服务器的数据后，我不得不使用这种方法来避免所有标签都涂上相同的浅灰色！谢谢萨拉赫丁！

【解决方案3】：

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

第一步：

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

    public pieChartOptions: ChartOptions = {
 responsive: true,
 };

 public pieChartLabels: Label[] = [['Not', 'Completed'], ['Completed', 'Tasks'], 'Pending Tasks'];
 public pieChartData: SingleDataSet = [300, 500, 100];
 public pieChartType: ChartType = 'pie';
 public pieChartLegend = true;
 public pieChartPlugins = [];

 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)']
 }];


 chartClicked(e){
   console.log(e);
   console.log('=========Chart clicked============');
 }
 chartHovered(e){
  console.log(e);
  console.log('=========Chart hovered============');
 }

第二步：

您的 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>

【讨论】：