更改 Angular 中极地数据集的颜色

Question

我正在 Angular 6 中构建一个仪表板应用程序，到目前为止一切顺利。我有一个指标部分，我在其中使用 ng2-charts 来使用 Chart.js.

我可以轻松更改线性图、条形图和圆环图的任何参数，但是当我尝试更改极面积图的颜色时，我就是做不对。

为了示例，我在我的极地部分中摘录了 HTML:

    <canvas baseChart [data]="polarAreaChartData" [labels]="polarAreaChartLabels" [legend]="polarAreaLegend" [chartType]="polarAreaChartType" [options]="polarAreaChartOptions" [colors]="polarAreaChartColors"></canvas>

我的打字稿中也有这个：

  public polarAreaChartType = 'polarArea';
  // Number of occurences
  public polarAreaChartData: number[] = [
    98, 82, 45, 12, 9
  ];
  // Reasons
  public polarAreaChartLabels: string[] = [
    'Reason A',
    'Reason B',
    'Reason C',
    'Reason D',
    'Reason E'
  ];
  public polarAreaChartOptions: any = {
    responsive: true,
    legend: {
      display: false
    }
  };
  public polarAreaChartColors: Array<any> = [
  ];

当我尝试在 polarAreaChartColors 中传递颜色时，它只为所有数据集传递一种颜色。我想为每个数据集传递一种颜色。我在我的甜甜圈图表中使用了这样的东西：

  public doughtnutChartColors: Array<any> = [
    {
      backgroundColor: [
        '#2e67bf',
        '#7f8fa4',
        '#bebebe'
      ]
    }
  ];

并且有效。我怎样才能在极地面积图中制作类似的东西？谢谢

Answer 1

我想我找到了答案。

假设我想表示 2 个数据集（仅作为示例）。

  public polarAreaChartData: number[] = [
    98, 82
  ];
  // Reasons
  public polarAreaChartLabels: string[] = [
    'Reason A',
    'Reason B'
  ];
  public polarAreaChartOptions: any = {
    responsive: true,
    legend: {
      display: false
    }
  };
  public polarAreaChartColors: Array<any> = [
    {
      backgroundColor: [
        '#2e67bf',
        '#7f8fa4'
      ],
    }
  ];

显然，我添加的颜色少于 5 种，这导致了一个问题，因为我有 5 个值和 5 个标签。当我用 2 + 2 + 2（值、标签 + 选项）进行测试时，颜色发生了变化。

我将测试更长的数据集，但我认为这是我的错误。无论如何谢谢你:)

更改 Angular 中极地数据集的颜色

Change color of Polar Area datasets in Angular

chart.js

ng2-charts

angular