需要帮助 - Apex 圆环图 - 在标签中设置固定值 - Angular？

Question

我正在尝试在 Angular 11x 应用程序中引入 APEX 圆环图，但无法理解文档。

我无法删除 % 值并在圆环图中设置固定值，也无法设置颜色。

 <apx-chart 
[series]="chartOptions.series" 
[chart]="chartOptions.chart" 
[labels]="chartOptions.labels" 
[responsive]="chartOptions.responsive" 
[legend]="chartOptions.legend">
</apx-chart>






export type ChartOptions = {
      series: ApexNonAxisChartSeries;
      chart: ApexChart;
      responsive: ApexResponsive[];
      labels: any;
      legend: ApexLegend;
      formatLabels: ApexDataLabels;
    //  formatLabels: any;
    };
    
    @ViewChild('chart') chart: ChartComponent; public chartOptions: Partial<ChartOptions>;
    
    loadChart(): void{
    
    this.chartOptions = {
          series: [45, 52, 22, 51, 30, 48],
          chart: {
            type: 'donut',
            width: '270px'
          },
         labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E', 'Team F'],
         color: ['#DFFF00', '#FFBF00', '#FF7F50', '#DE3163', '#9FE2BF'] // cant change default  color
          responsive: [
            {
              breakpoint: 480,
              options: {
                chart: {
                  width: 100,
                },
              }
            }
          ],
          legend: {
            show: true,
            position: 'bottom',
            horizontalAlign: 'center'
          },
          formatLabels: { // it's not helping to remove % from chart
            formatter(value: any): any {
              return value;
            },
          }
        };
    }

我按照这个 document 来格式化值，但似乎我没有正确地实现它。没有抛出错误。

如何显示 19 而不是 19.4%，即删除 %？

Answer 1

修改-

使用dataLabels代替formatLabels修改饼图数据。
使用 colors 而不是 color 来修改饼图颜色。

HTML部分-

<apx-chart 
    [series]="chartOptions.series" 
    [chart]="chartOptions.chart" 
    [labels]="chartOptions.labels" 
    [responsive]="chartOptions.responsive" 
    [legend]="chartOptions.legend"
    [dataLabels]="chartOptions.dataLabels"
    [colors]="chartOptions.colors">
</apx-chart>

TS 部分 -

import {
    ApexNonAxisChartSeries,
    ApexResponsive,
    ApexChart,
    ApexLegend,
    ApexDataLabels
} from "ng-apexcharts";

export type ChartOptions = {
    series: ApexNonAxisChartSeries;
    chart: ApexChart;
    responsive: ApexResponsive[];
    labels: any;
    legend: ApexLegend;
    dataLabels: ApexDataLabels; // add this
    color: any[]; // add this
};

@Component({...})

export class AppComponent {
    @ViewChild("chart") chart: ChartComponent;
    public chartOptions: Partial<ChartOptions>;

    this.chartOptions = {
      series: [45, 52, 22, 51, 30, 48],
      chart: {
        type: 'donut',
        width: '270px'
      },
      labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E', 'Team F'],
      colors: ['#DFFF00', '#FFBF00', '#FF7F50', '#DE3163', '#9FE2BF', '#000000'], // add this part to modify colours
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 100,
            },
          }
        }
      ],
      legend: {
        show: true,
        position: 'bottom',
        horizontalAlign: 'center'
      },
      dataLabels: { // add this part to remove %
        enabled: true,
        formatter(value: any, opts: any): any {
          return opts.w.config.series[opts.seriesIndex];
        },
      }
    };
}

输出-

需要帮助 - Apex 圆环图 - 在标签中设置固定值 - Angular？

Need Help - Apex doughnut chart - set fixed value in label - Angular?

angular

apexcharts