angular 如何更改 ng2 图表的标签颜色

Question

我使用 ng2 图表创建了一个条形图。由于标签不可见，条形图具有深色背景。我想自定义标签颜色。我该怎么做？

我的component.html代码

       <div style="display: block;">
          <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels"
            [options]="barChartOptions" [plugins]="barChartPlugins" 
            [colors]="barChartColors"
              [legend]="barChartLegend" [chartType]="barChartType">
           </canvas>
        </div>

我的component.ts代码

    public barChartOptions:any = {
  scaleShowVerticalLines: false,
  responsive: true
 };

  public barChartLabels:string[] = ['male', 'female', 'retired'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;

public barChartColors:Array<any> = [
{
  backgroundColor: '#D4526E',
  borderColor: 'rgba(105,159,177,1)',
  pointBackgroundColor: 'rgba(105,159,177,1)',
  pointBorderColor: '#fafafa',
  pointHoverBackgroundColor: '#fafafa',
  pointHoverBorderColor: 'rgba(105,159,177)'
},
{ 
  backgroundColor: '#008FFB',
  borderColor: 'rgba(77,20,96,1)',
  pointBackgroundColor: 'rgba(77,20,96,1)',
  pointBorderColor: '#fff',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(77,20,96,1)'
},
{ 
  backgroundColor: '#E2C044',
  borderColor: 'rgba(77,20,96,1)',
  pointBackgroundColor: 'rgba(77,20,96,1)',
  pointBorderColor: '#fff',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(77,20,96,1)'
  }
 ];
public barChartData:any[] = [
  {data: [10,40,65,74,22], label: 'Govt_Jobs'},
  {data: [20,46,27,67,89], label: 'Private'},
  {data: [38,8,61,26,77], label: 'daily_wage'},
 ];

Answer 1

我们可以改变标签的字体颜色，如下所示。

    public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true,
legend: {
  display: true,
  labels: {
    fontColor: 'green'
  }
 }
 }

Answer 2

我花了一段时间才弄清楚如何正确地实现这个主题变化驱动的标签颜色变化。可以使用 setColorschemesOptions of class import { ThemeService } from 'ng2-charts';。这是我的解决方案：假设您的图表选项如下所示

public chartOptions: ChartOptions = {
    maintainAspectRatio: true,
    responsive: true,
    legend: {
      position: 'bottom',
      labels: {
        fontColor: 'black'
      },
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          console.log(value, ctx);
          const label = ctx.chart.data.labels[ctx.dataIndex];
          return label;
        },
      },
      
    }
  };

现在您必须在 ngOnInit() 中订阅 themeChange 变量，并在每次选择深色主题时使用 themeService 设置 this.chartOptions.legend.labels.fontColor 的新值，这可以像这样完成：

import { Label, SingleDataSet, ThemeService } from 'ng2-charts';

constructor(
    private themeService: ThemeService
  ) { }

ngOnInit(): void {
    this.matService.themeSubject.subscribe((e) => {
      if(e === "purple-green" || e === "pink-bluegrey") {
        this.chartOptions.legend.labels.fontColor = "white";
        this.themeService.setColorschemesOptions(this.chartOptions);
      } else {
        this.chartOptions.legend.labels.fontColor = "black";
        this.themeService.setColorschemesOptions(this.chartOptions);
      }
    });
}

angular 如何更改 ng2 图表的标签颜色

How to change label color of ng2 chart in angular

angular

chart.js

ng2-charts