получить данные из 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

Edit:
вот что 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, показывающий это.