在角度中更改极地区域数据集的颜色

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(值、标签 + 选项(进行测试时，颜色发生了变化。

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