如何以角度更改ng2图表的标签颜色答案

【问题标题】：How to change label color of ng2 chart in angular如何以角度更改ng2图表的标签颜色
【发布时间】：2021-03-12 01:42:35
【问题描述】：

我使用 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'},
 ];

【问题讨论】：

你能创建一个有问题的 stackblitz 项目吗？
这个有办法改变标签字体颜色和颜色stackoverflow.com/questions/52596932/…

标签： angular chart.js ng2-charts

【解决方案1】：

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

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);
      }
    });
}

【讨论】：

【解决方案2】：

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

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

【讨论】：