我想更改图表的颜色，但我无法这样做。任何帮助将不胜感激。
我曾尝试为数据集提供颜色值，但似乎不起作用。
我的html模板
<div style="display: block">
<canvas style="position: relative; height:140vh; width:80vw;" baseChart [datasets]="barChartData"
[labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType">
</canvas>
</div>
</div>
我的组件文件
public barChartOptions = {
scaleShowVerticalLines: false,
responsive: true,
};
public barChartLabels = [];
public barChartType = 'bar';
public barChartLegend = true;
public barChartData: any = [{
data: [],
label: ''
}];
pageNo: number = 1;
moviedata = [];
datasets: [
{
borderColor: '#3cba9f',
fill: false
}
]
我想更改条形、边框颜色和文本的颜色。提前致谢！。
可以在数据集内设置颜色等，以及数据......例如： public barChartData: ChartDataSets[] = [{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', backgroundColor: 'lightgreen', hoverBorderColor: 'green', borderColor: '#000'}, {...} }
与样式相关的TS是：
public barChartOptions: ChartOptions = {
responsive: true,
// We use these empty structures as placeholders for dynamic theming.
scales: { xAxes: [{}], yAxes: [{}] },
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
}
}
};
public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [pluginDataLabels];
public barChartData: ChartDataSets[] = [
{
data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'
, backgroundColor: 'lightgreen', hoverBorderColor: 'green', borderColor: '#000'
},
{
data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'
, backgroundColor: 'lightblue', hoverBorderColor: 'blue', borderColor: '#000'
}
];
相关的HTML是：
<div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句