Как я могу использовать массивы в Highcarts?

Question

У меня есть два массива в моем коде, и я хотел бы вывести некоторые данные на круговую диаграмму, используя Highcharts. Один массив содержит метки этих данных, а другой - данные. Вот что я попробовал:

arr1 = [10, 39, 30]
arr2 = ['one', 'two', 'three']


Highcharts.chart('container-2', {
  chart: {
    margin: [0, 0, 0, 0],
    spacingTop: 0,
    spacingBottom: 0,
    spacingLeft: 0,
    spacingRight: 0,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Example'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      size: '50%',
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
      }
    }
  },
  series: [{
    name: 'Balances',
    colorByPoint: true,
    data: {
        y: arr1,
        name: arr2,
    }
  }]
});

К сожалению, это создает диаграмму без каких-либо данных на нем. Может кто-нибудь помочь мне понять, что я делаю не так?

Answer 1

Форматирование данных из меток и данных arrays в массиве объектов с y и name в качестве свойств.

const arr1 = [10, 39, 30];
const arr2 = ["one", "two", "three"];

const pieData = arr1.map((cur, index) => {
  return { name: arr2[index], y: cur };
});

console.info("PIEDATA::", pieData);

Затем передайте эти отформатированные данные в данные серии:

//notice data should be an array of objects for those pie plotting values
    series: [{
        name: 'Balances',
        colorByPoint: true,
        data:pieData
      }]

Answer 2

y и name должны быть единичными значениями. Вам нужно будет преобразовать два массива в объект напрямую:

let data = {}
for(let i=0;i<arr1.length;i++){
    data[arr2[i]] = data[arr1[i]];
}

Затем в опциях диаграммы:

Highcharts.chart('container-2', {
    ...
    series: [{
        name: 'Balances',
        colorByPoint: true,
        data: data
    }]
});