从 hashmap 获取数据到 highcharts

Question

我是 angular 和图表的新手，所以我选择使用 highcharts，我有这项服务 return 一个散列图，我想将值放入我想要的垂直条中，所以替换静态数据与来自服务的动态数据使用这种方式：

chart = new Chart({
  chart: {
    type: 'column'
  },
  title: {
    text: 'errors'
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Population',
    data: this.data,
  }]

})

这是我在 ngOnInit 中的服务：

this.dashboardHttpService.exceptionsByMicroseviceDaily().subscribe(success=> {
this.data=Object(success);
console.log(this.data);
})

我没有得到结果，请问高图表的垂直条如何与 hashmap 一起工作

编辑：
这是 console.log(this.data) 呈现的内容：
{超时：180，客户端处理程序：307，传输：199，未知主机：127，反射：140}

客户端处理程序:307
Reflections:140
Timeout:180
Transport:199
UnknownHost:127

这就是我放在 html 页面上的内容：

dashboard.component.html

 <div class="content"> <div [chart]="chart"></div>

一切都适用于静态数据，因此没有依赖性或配置丢失或类似情况。

Answer 1

图表不起作用的原因是，当您将动态 this.data 分配给图表时，您的 series 将如下所示：

series: [{
    name: 'Population',
    data: [Timeout: 180, ClientHandler: 307, Transport: 199, UnknownHost: 127, Reflections: 140]
}]

series 的格式不正确。格式应为以下两种格式之一：

将所有数据点绘制为一个

series [{ name: 'Population', data:[180, 307, 199, 127, 140] }]

将所有数据点按名称绘制成一个系列

series [{ name: 'Timeout', data: [180] }, { name: 'ClientHandler', data: [307] }, { ... }]

因此，您需要编写一个循环，将响应分为上述格式之一。看到你的图表结构，我认为你正在寻找第二种方法。

我做了一个简单的 for-loop，它从对象中提取数据用于演示目的：

var testdata = {Timeout: 180, ClientHandler: 307, Transport: 199, UnknownHost: 127, Reflections: 140}
var chartdata = []
var i = 0;
Object.keys(testdata).forEach(function(key) {

  chartdata[i++] = {name: key, data: [testdata[key]]};

});

在这个循环之后，chartdata 看起来像：

[{ name: 'Timeout', data: [180] }, { name: 'ClientHandler', data: [307] }, { ... }]

剩下的就是更改代码 series 以接受 chartdata 作为整个系列对象：

series: chartdata

图表会起作用。

Here 你可以找到一个非常简单的 JSFiddle 来展示这个。

从 hashmap 获取数据到 highcharts

get data from hashmap into highcharts

hashmap

highcharts

angular-chart

angular