高图表(时间序列可缩放)不适用于我的数据 [英] High charts (Time Series Zoomable) not working with my data

问题描述

我刚刚开始使用高图表(时间序列可缩放)，并且我有一个 JSON 数据，如下所示:

I just started to play around with high charts (Time-Series Zoomable) and I have a JSON data something like this:

[
    {"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轴参数.

I'm trying to pass the StartTime (dates) as my x-axis parameter and TotalReq (count) as my y-axis parameter.

但是由于某种原因，当我将此数据传递到图形时，它不会将数据加载到图形(黑屏).我在某个地方出问题了吗?纠正我，如果是的话.提前非常感谢.

But for some reason when I pass this data to the graph, it doesn't load the data to the graph (Blank screen). Am I going wrong somewhere? Correct me, if so. Much thanks in advance.

这是我目前正在研究的图表中的工作示例. Jsfiddle

Here is the working example from highcharts that i'm currently working on. Jsfiddle.

推荐答案

高级图表需要以毫秒为单位的时间.

Highcharts needs time in milliseconds.

因此，您的选择是在javascript中转换字符串，如下所示:

So your options are to convert your string in javascript, like this:

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

这意味着您将在整个表格中执行以下操作:

Which means that for the whole table you would do this:

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#中执行.

Which returns the millisecond value for that date. Or to do it in c#.

工作中的JSFiddle示例: https://jsfiddle.net/ewolden/rxLkn2u5/

这篇关于高图表(时间序列可缩放)不适用于我的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！