时间戳

首页 > 解决方案 > 从 hashmap 获取数据到 highcharts

angular - 从 hashmap 获取数据到 highcharts

问题描述

我是角度和图表的新手，所以我选择使用 highcharts，我有这个服务返回一个哈希图，我想将值放入我想要的垂直条中，所以使用这种方式用来自服务的动态数据替换静态数据：

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 页面上的内容：

仪表板.component.html

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

静态数据一切正常，因此没有依赖或配置丢失或类似的东西。

标签： angularhighchartshashmapangular-chart

解决方案

图表不起作用的原因是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

该图表将起作用。

在这里，您可以找到一个非常简单的 JSFiddle 来展示这一点。

推荐阅读