How can we customise the series data object property names “name” & “y” as part of highcharts-angular?

问题

Can anyone please help me on if there is anyway to customize the series data object property names as part of highcharts, actual proprty names are name & y.

And when I am trying to change these property names as vendor & rating then piechart is not loading in browser

I gone through many threads but not able to find solution as per my need.So, please help if there is anyway to update these property names with any code changes as I am getting such data format from rest api service as shown above with different values.Thanks in advance.

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
        }
      ]
    }]
  };
}

And see in app.component.ts file data object set hard coded data but in my case that object data will come from rest api service in this format

[
  {
    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
  }
]

So, here I just want assign that rest api response to that highcharts data object but in that case piechart not getting display. And as I don't have control to update those json object property names as that response coming from api service.Now, how I can say to HighCharts use vendor & rating instaed of name & y to display piechart?

app.component.html

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

回答1:

Unfortunately, Highcharts requires the data format with name and y properties for the pie chart type.

However, it can be done simply mapping data array and invoking init method with mapped one. To make it work you can wrap init method and map data before it (more about extending Highcharts here: wrapping prototype function https://www.highcharts.com/docs/extending-highcharts/extending-highcharts).

Wrap code:

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

Demo:
https://jsfiddle.net/BlackLabel/8ord92yk/

API reference:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

ANGULAR:

To make it work in Angular app you can use highcharts-angular official wrapper which can be downloaded here: https://github.com/highcharts/highcharts-angular. There you will also find an instruction on how to add your custom wrapper: https://github.com/highcharts/highcharts-angular#to-load-a-wrapper.

Demo of Angular app with the wrapper presented above:
https://codesandbox.io/s/m4z0628xk9

Another approach is to use plotOptions.series.keys and pass an array with only values.

Code:

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]
    ]
}]

Demo:
https://jsfiddle.net/BlackLabel/07cnxwqp/

API reference:
https://api.highcharts.com/highcharts/plotOptions.series.keys

来源：https://stackoverflow.com/questions/54025450/how-can-we-customise-the-series-data-object-property-names-name-y-as-part