Question

我是角度和图表的新手，所以我选择使用highcharts，我有这个服务返回一个hashmap我想把值放到垂直条我想要所以用服务中的动态数据替换静态数据这样：

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)呈现的内容：
{Timeout：180，ClientHandler：307，Transport：199，UnknownHost：127，Reflections：140}

ClientHandler的：307个
思考：140个
超时：180
交通：199
UnknownHost：127

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

dashboard.component.html

＆＃13;

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

＆＃13;

一切都可以正常使用静态数据，因此没有缺少依赖性或配置或类似的东西。

Answer 1

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

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

1 个答案: