Angular Highcharts Series name in piechart with API data

问题

I have a pie chart in my dashboard whose data is coming from an API, the data that API returns is training name and ratings for that particular training. I am successfully able to get the data from API and dispay it in my piechart. But for the Slice names of piechart I am not able to get the data in a particular format that I want.

The below image shows how my chart looks like, It can be seen that all the names are displayed on a each and every slice, rather than showing 1 name per slice

I want my chart like this. As it can be seen that here It shows 1 name for 1 slice

This is my app.component.ts file

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];    
                            rating_list.push(temp_row);
                            names_list.push(row.training_name)
                            });

                var dataSeries_pie = [];

                dataSeries_pie.push({
                                    data: rating_list,
                                    name: 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 file

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 file

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

}

app.component.html file

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

How can make my chart as shown in 2nd image? please help, Thank you!

回答1:

There is something wrong with your data. Your data output should look like in this example, where array of arrays has this format ['name', 'y'] or should look like this format - [{'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

来源：https://stackoverflow.com/questions/61818622/angular-highcharts-series-name-in-piechart-with-api-data

标签

angular

api

Highcharts