解决这个问题的方法是使用CharJS的配置选项来更改字体颜色。下面是一个示例组件,它通过设置“options”属性来更改图表的字体颜色:
import { Component } from '@angular/core';
import { ChartDataSets, ChartType, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent {
public lineChartData: ChartDataSets[] = [
{ data: [85, 72, 78, 75, 77, 75], label: 'Series A' }
];
public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
public lineChartOptions: (ChartOptions & { annotation: any }) = {
responsive: true,
scales: {
xAxes: [{
ticks: {
fontColor: 'red',
},
}],
yAxes: [{
ticks: {
fontColor: 'blue',
},
}]
},
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 'March',
borderColor: 'orange',
borderWidth: 2,
label: {
enabled: true,
fontColor: 'green',
content: 'LineAnno'
}
},
],
},
};
public lineChartColors: Color[] = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,255,0,0.28)',
},
];
public lineChartLegend = true;
public lineChartType: ChartType = 'line';
public lineChartPlugins = [];
}
在这个示例中,我们更改了 X 轴和 Y 轴上的字体颜色。我们还使用“annotation”选项来添加一个基线,并更改对应的标签字体颜色。
这