对不起,我遇到问题,试图将字体颜色更改为所有标签,我阅读了文档,但我真的不太了解, 我搜寻了很多例子,但没有一个为我服务。
这是我在Ts中的代码
public barChartOptions = {
scaleShowVerticalLines: false,
responsive: true,
scaleShowValues: true,
animation: {
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.color = "red";
ctx.FontSize = '1.1rem';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
}
};
public barChartLabels = ['Linea'];
public barChartType = 'bar';
public barChartLegend = {display:true, labels:{fontColor:"red"}};//true
public barChartData = [
{data: [93], label: 'Proceso'},
{data: [64], label: 'Orden y Limpieza'}
];
public barChartFitBars = true;
public myColors = [
{
backgroundColor: 'rgba(103, 58, 183, 0.5)',
borderColor: 'rgb(103, 58, 183)',
pointBackgroundColor: 'rgb(103, 58, 183)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(103, 58, 183, .8)'
}, {
backgroundColor: 'rgba(255, 255, 183, .5)',
borderColor: 'rgb(255, 255, 183)',
pointBackgroundColor: 'rgb(255, 255, 183)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255, 255, 183, .8)'
}
]
和HTML代码
<mat-tab label="Indices de Conformidad">
<div>
<div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
[colors]="myColors">
</canvas>
</div>
</div>
</mat-tab>
我希望我对自己的解释很好