Как мы можем настроить имена свойств объекта данных серии "name" и "y" как часть highcharts-angular?

Question

Может кто-нибудь, пожалуйста, помогите мне, если есть в любом случае настроить имена свойств объекта данных серии как часть старших диаграмм, фактические имена proprty: name & y .

И когда я пытаюсь изменить эти имена свойств как vendor & rating , тогда круговая диаграмма не загружается в браузере

Я прошел через многие темы, но не смог найти решение в соответствии с моими потребностями. Так что, пожалуйста, помогите, если есть возможность обновить эти имена свойствс любыми изменениями кода, так как я получаю такой формат данных из службы остальных 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 api этому объекту данных highcharts, но в этом случае круговая диаграмма не отображается.И так как у меня нет контроля за обновлением этих имен свойств объектов json как ответа от службы API. Теперь, как я могу сказать HighCharts, используйте vendor & рейтинг вместо 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