如何在 angular 中更改 ng2 图表的 label 颜色

Question

我使用 ng2 图表创建了一个条形图。 由于标签不可见，条形图具有深色背景。 我想定制 label 颜色。 我怎样才能做到这一点？？

我的组件.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

我花了一段时间才弄清楚如何正确实现此主题更改驱动的 label 颜色更改。 class 的setColorschemesOptions 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);
      }
    });
}