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

【问题标题】：Not able to bind data to Highcharts in Angular 8无法将数据绑定到 Angular 8 中的 Highcharts
【发布时间】：2021-06-17 08:20:02
【问题描述】：

我是 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 }, { “名称”：“其他”， “是”：1 } ]

【问题讨论】：

提供最少的可重现代码。
从 Web API 获取的数据如下： [ { "name": ".Net Developer", "y": 1 }, { "name": "DBA", "y": 1 }，{“名称”：“JAVA”，“y”：1 }，{“名称”：“其他”，“y”：1 }]
如果我保留硬编码的值，如代码中的注释代码，它可以正常工作。
请说明您的实际问题、问题和任何错误信息

标签： angular highcharts

【解决方案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

【讨论】：

硬编码值可以正常工作。但如果我从 web.api 获取数据，那么它不会按如下方式工作： [ { "name": ".Net Developer", "y": 1 }, { "name": "DBA", "y" : 1 }, { "name": "JAVA", "y": 1 }, { "name": "其他", "y": 1 } ]

【解决方案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);       
    });       
}

【讨论】：