我们如何自定义系列数据对象属性名称“ name”和“ y”作为highcharts-angular的一部分？

Question

如果有任何人可以自定义系列数据对象属性名称作为highcharts的一部分，请帮助我，实际属性名称为名称和 y 。

>

当我尝试将这些属性名称更改为供应商和评级时，饼图未加载到浏览器中

我经历了很多线程，但无法根据需要找到解决方案，因此，请问是否有任何代码更改来更新这些属性名称的帮助，因为我从上述REST API服务获取了这种数据格式具有不同的值。请先感谢。

app.component.ts

import {Component} from '@angular/core';
import * as Highcharts from 'highcharts';

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


export class AppComponent {

  constructor(){
  };

  setStarFlag(id:number){
    console.log(id);
  }

  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
    },
    title: {
      text: 'Vendor Ratings'
    },
    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} %',
          style: {
            //color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
          }
        },
        showInLegend: true
      },
      series: {
        cursor: 'pointer',
        point: {
          events: {
            click: function(e){
              const p = e.point;
              this.setStarFlag(p.name);
            }.bind(this)
          }
        }
      }
    },
    credits: {
      enabled: false
    },
    series: [{
      name:'Rating',
      data: [
        {
          name: 'Chrome',
          y: 61.41
        },
        {
          name: 'Internet Explorer',
          y: 11.84
        },
        {
          name: 'Firefox',
          y: 10.85
        },
        {
          name: 'Edge',
          y: 4.67
        },
        {
          name: 'Safari',
          y: 4.18
        },
        {
          name: 'Sogou Explorer',
          y: 1.64
        },
        {
          name: 'Opera',
          y: 1.6
        },
        {
          name: 'QQ',
          y: 1.2
        },
        {
          name: 'Other',
          y: 2.61
        }
      ]
    }]
  };
}

在app.component.ts文件data中看到对象集硬编码数据，但是在我的情况下，对象数据将来自其余api服务，且格式为

[
  {
    vendor: 'Chrome',
    rating: 61.41
  },
  {
    vendor: 'Internet Explorer',
    rating: 11.84
  },
  {
    vendor: 'Firefox',
    rating: 10.85
  },
  {
    vendor: 'Edge',
    rating: 4.67
  },
  {
    vendor: 'Safari',
    rating: 4.18
  },
  {
    vendor: 'Sogou Explorer',
    rating: 1.64
  },
  {
    vendor: 'Opera',
    rating: 1.6
  },
  {
    vendor: 'QQ',
    rating: 1.2
  },
  {
    vendor: 'Other',
    rating: 2.61
  }
]

因此，在这里，我只想将其余api响应分配给该highcharts数据对象，但在这种情况下，Piechart无法显示。而且由于我无法控制更新这些json对象的属性名称，因为响应来自api服务。现在，我如何对HighCharts说使用 vendor 和 rating 显示名称和 y 的饼图？

app.component.html

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

Answer 1

不幸的是，Highcharts要求饼图类型的数据格式带有名称和y属性。

但是，可以简单地映射数据数组并使用映射的init调用init方法。要使其工作，您可以包装init方法并在其之前映射数据（有关在此处扩展Highcharts的更多信息： 包装原型函数 https://www.highcharts.com/docs/extending-highcharts/extending-highcharts）。

包装代码：

(function(H) {
  H.wrap(H.Series.prototype, 'init', function(proceed) {

    var tempArr = [],
      tempObj,
      key;

    arguments[2].data.forEach((elem, i) => {
      tempObj = {
        name: elem.vendor,
        y: elem.rating
      };

      for (key in elem) {
        if (elem.hasOwnProperty(key) && key !== 'vendor' && key !== 'rating') {
          tempObj[key] = elem[key];
        }
      }

      tempArr[i] = tempObj;
    });

    arguments[2].data = tempArr;
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

  });
})(Highcharts);

演示：
https://jsfiddle.net/BlackLabel/8ord92yk/

API参考：
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

英语：

要使其在Angular应用中正常工作，您可以使用highcharts-angular官方包装，可以在此处下载：https://github.com/highcharts/highcharts-angular。在那里，您还会找到有关如何添加自定义包装的说明：https://github.com/highcharts/highcharts-angular#to-load-a-wrapper。

带有上述包装的Angular应用程序演示：
https://codesandbox.io/s/m4z0628xk9

另一种方法是使用plotOptions.series.keys并传递仅包含值的数组。

代码：

series: [{
    type: 'pie',
    name: 'Browser share',
    keys: ['name', 'y', 'sliced', 'selected'],
    data: [
        ['Firefox', 45.0],
        ['IE', 26.8],
        ['Chrome', 12.8, true, true],
        ['Safari', 8.5],
        ['Opera', 6.2],
        ['Others', 0.7]
    ]
}]

演示：
https://jsfiddle.net/BlackLabel/07cnxwqp/

API参考：
https://api.highcharts.com/highcharts/plotOptions.series.keys