Высокие графики (Time Series Zoomable) не работают с моими данными - PullRequest
Новая
       13

Высокие графики (Time Series Zoomable) не работают с моими данными

0 голосов
/ 04 июля 2018

Я только начал играть с высокими графиками ( Time-Series Zoomable ), и у меня есть JSON данные примерно такие: 

[
    {"StartTime":"2018-06-11T00:00:00","TotalReq":10},
    {"StartTime":"2018-06-12T00:00:00","TotalReq":34},
    {"StartTime":"2018-06-15T00:00:00","TotalReq":31},
    {"StartTime":"2018-06-16T00:00:00","TotalReq":2},
    {"StartTime":"2018-06-18T00:00:00","TotalReq":38},
    {"StartTime":"2018-06-19T00:00:00","TotalReq":69},
    {"StartTime":"2018-06-20T00:00:00","TotalReq":39},
    {"StartTime":"2018-06-21T00:00:00","TotalReq":100},
    {"StartTime":"2018-06-22T00:00:00","TotalReq":180},
    {"StartTime":"2018-06-25T00:00:00","TotalReq":104},
    {"StartTime":"2018-06-26T00:00:00","TotalReq":101},
    {"StartTime":"2018-06-27T00:00:00","TotalReq":123}
]

Я пытаюсь передать StartTime (даты) в качестве параметра моей оси X и TotalReq (количество) в качестве параметра моей оси Y.

Но по какой-то причине, когда я передаю эти данные на график, он не загружает данные на график (пустой экран). Я что-то не так делаю? Поправь меня, если так. Большое спасибо заранее.

Вот рабочий пример хай-чарта, над которым я сейчас работаю. Jsfiddle.

1 Ответ

0 голосов
/ 04 июля 2018

Highcharts требуется время в миллисекундах .

Итак, вы можете конвертировать вашу строку в javascript, например так: 

new Date("2018-06-27T00:00:00").getTime()

Что означает, что для всей таблицы вы должны сделать это: 

var arr = [
  {"StartTime":"2018-06-11T00:00:00","TotalReq":10},
  {"StartTime":"2018-06-12T00:00:00","TotalReq":34},
  {"StartTime":"2018-06-15T00:00:00","TotalReq":31},
  {"StartTime":"2018-06-16T00:00:00","TotalReq":2},
  {"StartTime":"2018-06-18T00:00:00","TotalReq":38},
  {"StartTime":"2018-06-19T00:00:00","TotalReq":69},
  {"StartTime":"2018-06-20T00:00:00","TotalReq":39},
  {"StartTime":"2018-06-21T00:00:00","TotalReq":100},
  {"StartTime":"2018-06-22T00:00:00","TotalReq":180},
  {"StartTime":"2018-06-25T00:00:00","TotalReq":104},
  {"StartTime":"2018-06-26T00:00:00","TotalReq":101},
  {"StartTime":"2018-06-27T00:00:00","TotalReq":123}]

arr.map(function(data) { return {x: new Date(data.StartTime).getTime(), y: data.TotalReq }})

Возвращает значение в миллисекундах для этой даты. Или сделать это в C #.

Пример работы JSFiddle: https://jsfiddle.net/ewolden/rxLkn2u5/

...