Получить данные из hashmap в старшие диаграммы

Question

Я новичок в угловых и диаграммах, поэтому я решил работать с высокими диаграммами, у меня есть этот сервис, который возвращает хэш-карту, я хочу поместить значения в вертикальную черту, которую я хочу, поэтому замените статические данные на динамические данные из сервиса следующим образом:

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, ClientHandler: 307, Транспорт: 199, UnknownHost: 127, Размышления: 140}

ClientHandler: 307
Размышления: 140
Тайм-аут: 180
Транспорт: 199
UnknownHost: 127

и это то, что я положил на мою HTML-страницу:

dashboard.component.html

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

все отлично работает со статическими данными, поэтому нет зависимости или конфигурации не хватает или что-то в этом роде.

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

График будет работать.

Здесь вы можете найти очень простой JSFiddle, показывающий это.