带有API数据的饼图中的角度Highcharts系列名称

Question

我的仪表板上有一个饼图，其数据来自API，API返回的数据是该培训的培训名称和等级。我可以从API成功获取数据并在饼图中支付。但是对于饼图的切片名称，我无法以所需的特定格式获取数据。

下图显示了我的图表外观，可以看到所有名称都显示在每个切片上，而不是每个切片显示1个名称

我想要我的图表这样。可以看出，这里显示了1个切片的1个名称

这是我的app.component.ts文件

import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts";
import { interval,Subscription  } from 'rxjs';
import { TrainingRatings } from './shared/training-ratings.model';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class AppComponent implements OnInit{
    ratings_url: string = 'https://localhost:44311/api/trending_trainings';
    data: any;

    //subscription: Subscription;
    constructor(public service: DashService) { }


   Highcharts = Highcharts;


    piechart={
        series_data: [],
        chart:{
          type: "pie",
          backgroundColor: 'white',
          borderWidth: 2,
          borderColor: '#D9F6FC',
          borderRadius: 20,
          plotShadow: false,

        },
        title: {
          text: "Trending Trainings"
        },
        credits: {
            enabled: false
            },
        series: []
    }

    ngOnInit() {

            this.getResponse(this.ratings_url).then(
                data => {

                const rating_list = [];
                const names_list = [];

                data.forEach(row => {
                            const temp_row = [row.ratings,row.training_name];    
                            rating_list.push(temp_row);
                            //names_list.push(row.training_name)
                            });

                var dataSeries_pie = [];

                dataSeries_pie.push({
                                    data: rating_list,
                                    name: rating_list//names_list
                                    });

                this.piechart.series = dataSeries_pie;

                })

                //);
            }

        getResponse(ratings_url) {
                                    return this.service.get_pie_data(this.ratings_url)
                                    .toPromise().then(res => {
                                    return res;
                                        });
                                    }

}

service.ts文件

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TrainingRatings } from './training-ratings.model';
import { Observable, from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DashService {

  readonly ratingsURL = "https://localhost:44311/api/trending_trainings"

  constructor(private http: HttpClient) { }

 get_pie_data(ratingsURL):Observable<TrainingRatings[]>
            {
              return this.http.get<TrainingRatings[]>(ratingsURL);
            }

model.ts文件

export class Dash {
participant_master_id: number;
name: string;

}

app.component.html文件

 <div class="chart-box" > 
    <highcharts-chart [Highcharts]="Highcharts" [options]="piechart"></highcharts-chart>
  </div>

如何使我的图表如图2所示？请帮忙，谢谢！

Answer 1

您的数据有问题。您的数据输出应类似于本示例，其中数组array的格式为['name', 'y']或以下格式-[{'name', 'y'}]：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/point/sliced/

series: [{
    data: [
        {
            name: 'Firefox',
            y: 44.2,
            sliced: true
        },
        ['IE7',       26.6],
        ['IE6',       20],
        ['Chrome',    3.1],
        ['Other',    5.4]
    ]
}]

API：https://api.highcharts.com/highcharts/series.pie.data.sliced