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中更改Polar Area数据集的颜色

1 个答案: