Labels string from Asp.net does not distributed in the highchart

问题

I try to make a pie highchart with data from Asp.Net and when i run the program the labels are not distributed individually,i use the same method for data array and i didn't have this issue there. This is a representation of the graph : https://jsfiddle.net/rk0t4ghc/1/ ,i did the dataLabel array to reproduce the data from Asp.net. Can you please help me?


import { Component, OnInit, Input } from '@angular/core';
import * as Highcharts from 'highcharts';
import { Order } from 'src/app/shared/order';
import {Customer} from 'src/app/shared/customer';
import {SalesDataService} from '../../services/sales-data.service';
import _ from 'lodash';


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

export class PieChartComponent implements OnInit {

  constructor(private  _salesDataService:SalesDataService) { }
 
  @Input() inputData:any;
  @Input()  limit:number;
 
  
  
  
  ngOnInit() {
    this.parseChartData(this.inputData,this.limit);

  }


 parseChartData(res:any,limit? :number){
   console.log('response:',res);
   const allData=res.slice(0,limit);
   console.log('allData(slice):', allData);

   Highcharts.chart('container2',{

    chart:{
      events:{
        load(){
          const chart=this;
          
          chart.series[0].points.forEach((point)=>
            point.update({
              
              name:allData.map(x=>_.values(x)[0])
              
            }),false);
  chart.redraw();
          }
        }
      },
      
      tooltip:{
        pointFormat: '{name}: <b>{point.percentage:.1f}%</b>'
      },
      series:[{
        type:'pie',
        showInLegend:true,
      
       
      "data":allData.map(x=>_.values(x)[1])
        
      }]
   })
  

 }
}

回答1:

It is happening because you are assigning the entire array as a point name instead of a certain element of the array. (name: array, instead of a name: array[index])

Live demo: https://jsfiddle.net/BlackLabel/yLfq207n/

   load() {
      dataLabels=['Name1','Name2','Name3','Name4']
      
        const chart = this;
        chart.series[0].points.forEach((point, index) => point.update({
          name:dataLabels[index]
        }), false);
                
                chart.redraw();
      }

来源：https://stackoverflow.com/questions/63254595/labels-string-from-asp-net-does-not-distributed-in-the-highchart

标签

javascript

Highcharts