代码之家 › 专栏 › 技术社区 › sana ch

将数据从hashmap获取到highcharts

angular-chart hashmap highcharts angular

sana ch · 技术社区 · 6 年前

我不熟悉角度图和图表,所以我选择使用highcharts,我有一个返回哈希图的服务,我想把值放在竖条上,我想用服务中的动态数据替换静态数据,使用以下方式:

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

})

这是我在恩戈尼特的服务:

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

我没有得到结果,请告诉我高位图表的垂直条如何与hashmap配合使用

编辑:
这是什么 console.log(this.data) 渲染:
{超时:180,客户端句柄:307,传输:199,未知主机:127,反射:140}

ClientHandler:307
反射:140
超时:180
交通:199
未知成本:127

这是我在html页面上的内容:

仪表板组成部分html

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

静态数据一切正常,因此不存在缺少依赖性或配置之类的情况。

1 回复 | 直到 6 年前

user9420984 user9420984 6 年前

图表不起作用的原因是 series 指定动态 this.data 至图表:

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

这是不正确的格式 系列 。格式应为以下两种格式之一:

将所有数据点绘制为一个

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

图表将起作用。

Here 您可以找到一个非常简单的JSFIDLE来显示这一点。

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前