Строка меток из Asp. net не распространяется в highchart - PullRequest
0 голосов
/ 04 августа 2020

Я пытаюсь сделать ap ie highchart с данными из Asp. Net, и когда я запускаю программу, метки не распределяются индивидуально, я использую тот же метод для массива данных, и у меня этого не было вопрос там. Это представление графика: https://jsfiddle.net/rk0t4ghc/1/, я создал массив dataLabel для воспроизведения данных из Asp. net. Не могли бы вы мне помочь?

введите описание изображения здесь


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 Ответ

1 голос
/ 05 августа 2020

Это происходит из-за того, что вы назначаете весь массив как имя точки вместо определенного элемента массива. (имя: массив, вместо имени: массив [индекс])

Живая демонстрация: 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();
      }
...