Ярлыки отображаются как массив строк, а не отдельные - PullRequest
Новая
       60

Ярлыки отображаются как массив строк, а не отдельные

0 голосов
/ 03 августа 2020

Я пытаюсь создать панель с высокими диаграммами с помощью Asp. Net и Angular, но когда я пытаюсь создать диаграмму с данными из Asp. net, метки отображаются в виде массива строк в каждом фрагменте диаграмма и название легенды отображаются «срезом», и я не знаю почему. Я заметил, что они выглядят так, только когда я использую здесь «name»: «name: allData.map (x => x ['name'] ) "

enter image description here

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 * as moment from 'moment';


@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;
  orderModel:Order[];
customerName:any;
  highcharts=Highcharts;
  
  public  options: any = {
    chart: {
      renderTo: 'container',
    type: 'pie'
     },
    title: {
    text: ''
     },
     plotOptions: {
       pie: {
       innerSize:'50%',
       dataLabels: {
      enabled:true,
      
      
      },
      showInLegend: true
       },
    
    
    tooltip:{
      pointFormat: '{name}: {point.percentage:.1f}%'
    },
       
       },
      
    
      series: [{
       name:'',
        data:[ ],
      }],
    }


  
  
  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);




 this.options.series=[{data:allData.map(x=>x['total']),
  name:allData.map(x=>x['name'])
}]



 Highcharts.chart('container2',this.options);
}
}

Live Demo:https://jsfiddle.net/rwL45ypc/

1 Ответ

0 голосов
/ 04 августа 2020

Это происходит потому, что серия p ie немного отличается от других (например, строка). Легенда создается из точек (срезов), а не из серий, как обычно. Итак, чтобы задать имя для каждого фрагмента, вам необходимо указать имя для каждой точки. 

  series: [{
    type: 'pie',
    showInLegend: true,
    data: [{
        name: 'Name1',
        y: 12
      },
      {
        name: 'Name2',
        y: 12
      },
      {
        name: 'Name3',
        y: 12
      }, {
        name: 'Name4',
        y: 12
      }
    ]
  }]

Живая демонстрация:
https://jsfiddle.net/BlackLabel/hecL5kfm/

...