英文:
ng2-chart - barChart color customization not working
问题
Angular 14, ChartJS: 4.1.1, NG2-Charts: 4.1.1.
当尝试自定义条形图颜色时，我遇到了一些问题。我还尝试了ng2-charts 2.0.0。目前，我得到了默认颜色。
public barChartColors: Array
backgroundColor: ['#fc5858', '#19d863', '#fdf57d'],
borderColor: ['rgba(252, 235, 89, 0.2)', 'rgba(77, 152, 202, 0.2)', 'rgba(241, 107, 119, 0.2)']
}];
英文:
Angular 14, ChartJS: 4.1.1, NG2-Charts: 4.1.1.
I am facing some trouble when trying to customize bar chart colors. I also tried ng2-charts 2.0.0. As of now I am getting default colors.
public barChartColors: 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)']
}];
<div style="display: block; width: 900px; ">
<canvas baseChart
[data]="barChartData"
[options]="barChartOptions"
[colors]="barChartColors"
[type]="chartType">
</canvas>
</div>
答案1
得分: 1
对于ng2-charts 4.1.1版本。
从画布中移除[colors]。
并将barChartData更新如下：
this.barChartData = {
labels: this.barchart_Labels,
datasets: [
{ data: this.dataset1, label: 'Label1', backgroundColor: ['#fc5858'] },
{ data: this.dataset2, label: 'Label2', backgroundColor: ['#19d863'], },
{ data: this.dataset3, label: 'Label3', backgroundColor: ['#fdf57d'] }
]
};
英文:
For ng2-charts 4.1.1.
Remove [colors] from canvas.
And update barChartData as below :
this.barChartData = {
labels: this.barchart_Labels,
datasets: [
{ data: this.dataset1, label: 'Label1', backgroundColor: [
'#fc5858'
] },
{ data: this.dataset2, label: 'Label2', backgroundColor: [
'#19d863'
], },
{ data: this.dataset3, label: 'Label3', backgroundColor: [
'#fdf57d'
] }
]
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论