时间戳

首页 > 解决方案 > 在 Angular 中更改极地数据集的颜色

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

问题描述

我正在 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'
      ]
    }
  ];

它有效。如何在极地区域图中制作类似的东西？谢谢。

标签： angularchart.jsng2-charts

解决方案

I think I found the answer.

Let's say I want to represent 2 datasets (just for the example).

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

Apparently, I was adding less than 5 colors, and it was causing a problem, since I had 5 values and 5 labels. When I've tested with 2 + 2 + 2 (value, label + options) the colors have changed.

I will test for a longer dataset, but i think it was my mistake. Thank you anyway :)

推荐阅读