javascript - 如何在 Highcharts 中使用数组？

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

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