如何在Angular中用自定义数组填充Highcharts钻取柱状图数据

我在Angular项目中使用Highcharts库，采用Column Drilldown（钻取柱状图）模型。

目标 #

图表的data部分需要如下格式：

data: [{
  name: 'text name',
  y: 5,
  drilldown: 'text name'
}]

希望用自定义数组自动填充该data部分，而非手动编写。

原始数据 #

我的对象数据如下：

var arr = { "Type1": 1.44, "Type2": 0.64, "Type3": 0.20, "Type4": 1.70 }

期望转换后的格式 #

data: [{
      name: 'Type1',
      y: 1.44,
      drilldown: 'Type1'
    },
    {
      name: 'Type2',
      y: 0.64,
      drilldown: 'Type2'
    },
    {
      name: 'Type3',
      y: 0.20,
      drilldown: 'Type3'
    },
    {
      name: 'Type4',
      y: 1.70,
      drilldown: 'Type4'
    }
]

当前尝试及问题 #

我尝试构建myarray数组：

var myarray = [];

for (const [a, b] of Object.entries(arr)) {
  myarray.push("{name:'" + a + "', y:" +b + ", drilldown:'" + a + "'}")
}

得到的结果是：

["{name:'Type1', y:1.44, drilldown:'Type1'}", "{name:'Type2', y:0.64, drilldown:'Type2'}", "{name:'Type3', y:0.2, drilldown:'Type3'}", "{name:'Type4', y:1.7, drilldown:'Type4'}"]

这个格式不符合Highcharts的语法要求，我尝试将它放入data中：

data: [
  myarray
]

但图表无法正常工作，请问该如何修正？

解决方案 #

你当前的核心问题是把对象转换成了字符串存入数组，而Highcharts需要的是对象数组，不是字符串数组。修改循环逻辑，直接推送对象而非字符串即可：

var myarray = [];

for (const [name, y] of Object.entries(arr)) {
  myarray.push({
    name: name,
    y: y,
    drilldown: name
  });
}

之后直接将myarray赋值给data：

data: myarray

这样转换后的数组就是Highcharts需要的对象结构，图表就能正常渲染了。

内容的提问来源于stack exchange，提问作者Julien