带有API数据的饼图中的Angular Highcharts系列名称 [英] Angular Highcharts Series name in piechart with API data

问题描述

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

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.

下图显示了我的图表外观，可以看到所有名称都显示在每个切片上，而不是每个切片显示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];    
                            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文件

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所示?请帮忙， 谢谢！

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

推荐答案

您的数据有问题.您的数据输出应类似于本示例，其中数组数组的格式为['name', 'y']或以下格式-[{'name', 'y'}]: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/样本/高位图/点/切片/

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

这篇关于带有API数据的饼图中的Angular Highcharts系列名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！