Question

我正在使用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 baseChart
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
          [colors]="pieChartColors"></canvas>

Answer 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'专业人士，但是afaik应该可行。}

Answer 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>

Answer 3

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

步骤1：

在您的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============');
 }

第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>

Chart.js ng2-未显示饼图中的图表颜色

3 个答案: