我的图表定义为:
<canvas #chart baseChart
[data]="_chartData"
[labels]="_chartLabels"
[chartType]="_chartType"
[colors]="_backgroundColors">
</canvas>
我将颜色指定为:
private _backgroundColors:string[] = ["#345657", "#112288", "#adf444"];
一切都有效,但颜色。如果我传入此数组,则所有颜色显示为相同的颜色,浅灰色。有人看到可能出错的地方吗?
答案 0 :(得分:3)
可以找到解决方案here。目前没有记录。
它必须是这样的:
[{backgroundColor: ["#e84351", "#434a54", "#3ebf9b", "#4d86dc", "#f3af37"]}]
答案 1 :(得分:1)
它应该是这样的:
[
{
backgroundColor:"#ffa954",
},
{
borderColor:"#589b00",
}
]
每个对象代表dataSets
数组
答案 2 :(得分:1)
我同意以上回答,如果有人需要,我想提供详细信息。 我的示例在PIE图表中也适用于其他人。
步骤1:
在您的component.ts文件中添加以下内容
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)']
}];
第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>