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

Question

有没有办法自定义系列数据对象属性名称作为 Highcharts 的一部分，实际属性名称是 name & y。

当我尝试将这些属性名称更改为 vendor 和 rating 时，饼图未在浏览器中加载

我想通过任何代码更改来更新这些属性名称，因为我从 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

对象设置硬编码数据，但在我的情况下，对象数据将以这种格式来自 REST 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
  }
]

因此，在这里我只想将该 REST API 响应分配给该 highcharts 数据对象，但在这种情况下，饼图不会显示。因为我无法控制更新这些 JSON 对象属性名称作为来自 API 服务的响应。现在，我如何对 HighCharts 说使用 vendor & rating 而不是 name & y 来显示饼图？

app.component.html

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

Answer 1

不幸的是，Highcharts 需要饼图类型具有 name 和 y 属性的数据格式。

但是，可以简单地映射数据数组并使用映射的数组调用 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