无法将数据绑定到 Angular 8 中的 Highcharts

Question

我是 Highcharts 的新手。我无法将数据绑定到 Highcharts 的系列属性。

constructor(private _httpClientRequestService: HttpClientRequestService, private _toastrService: ToastrService) {
    this._httpClientRequestService.getAllData('http://localhost:62297/api/Dashboard/GetDashboardRoles').subscribe(  
      (Response: any) => {
      this.seriesOptions = Response;   
      console.log(this.seriesOptions);  
    },
    error => {
      this._toastrService.error('Error',error.message);       
    });       
}

  ngOnInit() {
      this.createGraph(); 
  }

 createGraph(){
 this.chartOptions = {
      chart: {
        plotBackgroundColor: 'silver',
        plotBorderWidth: 2,
        plotShadow: true,
        type: 'pie'
      },
      title: {
        text: 'Browser market shares in October, 2019'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
          }
        }
      },
      
      series: [{
        name: 'Brands',
        colorByPoint: true,
        type: undefined,
        // data: [{
        //   name: 'Chrome',
        //   y: 61.41          
        // }, {
        //   name: 'Internet Explorer',
        //   y: 11.84
        //}]
        
        data: this.seriesOptions
        
      }]    
    }

}

从 Web API 获取的数据是： [ { "name": ".Net 开发人员", “是”：1 }, { "姓名": "DBA", “是”：1 }, { "姓名": "JAVA", “是”：1 }, { "name": "其他", “是”：1 } ]

Answer 1

您可以在这里找到一个工作示例：

  chartOptions: Highcharts.Options = {
    series: [
      {
        name: 'Brands',
        colorByPoint: true,
        type: undefined,
        data: [
          {
            name: 'Chrome',
            y: 61.41
          },
          {
            name: 'Internet Explorer',
            y: 11.84
          }
        ]
      }
    ]
  };

演示： https://stackblitz.com/edit/highcharts-angular-basic-line-1zxy6e

Answer 2

我明白问题出在哪里，正如您在我的问题中看到的那样 this.createGraph() 在 ngOnInit() 中。我将图形的调用移到了构造函数中，即我调用 Web.API 来获取数据的地方。下面是工作代码。

constructor(private _httpClientRequestService: HttpClientRequestService, private _toastrService: ToastrService) {
    this._httpClientRequestService.getAllData('http://localhost:62297/api/Dashboard/GetDashboardRoles').subscribe(  
      (Response: any) => {
      this.seriesOptions = Response;      
      this.createGraph() 
    },
    error => {
      this._toastrService.error('Error',error.message);       
    });       
}

无法将数据绑定到 Angular 8 中的 Highcharts

Not able to bind data to Highcharts in Angular 8

highcharts

angular