如何使用自定义数组在 Angular 中填充 JS Highcharts 图表

Question

我尝试将 Highcharts JS 库与 Angular 一起使用。
我使用 Column Drilldown 模型.

目标：

图表的数据部分必须如下所示：

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

我的目标是用数组填充该数据部分，而不是手动输入。

数据：

我的阵列看起来像这样：

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

所以Highcharts数据部分应该变成：

 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: [
      myarray
    ]

...它确实失败了。也许是因为撇号？
您如何更正它以使图表正常工作？
请看我对那个JSFiddle的尝试。

任何帮助将不胜感激，谢谢！

Answer 1

我不知道您正在使用的库，但我知道 data 期望的语法是一个 Array< Object> 并且您正在将变量 myArray 构建为一个 Array< string>。 我建议更改代码片段：

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

对于：

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

然后 data 可以像这样接收 myArray：

data: myarray

Answer 2

你需要创建一个对象数组，而不是一个字符串数组。例如：

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

Highcharts.chart('container', {
  series: [{
    ...,
    data: myarray
  }],
  ...
});

---

现场演示： https://jsfiddle.net/BlackLabel/bhsw42r9/

API参考： https://api.highcharts.com/highcharts/series.column.data