2016-11-04 56 views
0

我正在創建一個Highstock圖表來顯示每天收到的電子郵件數量。我有每天更新一個JSON文件,可以在下面看到:epoch datetime在HighStock圖表中顯示不正確

[{ 
"name": "Month", 
"data": [1471993200000, 1472079600000, 1472166000000, 1472252400000, 1472338800000, 1472425200000, 1472511600000, 1472598000000, 1472684400000, 1472770800000, 1472857200000, 1472943600000, 1473030000000, 1473116400000, 1473202800000, 1473289200000, 1473375600000, 1473462000000, 1473548400000, 1473634800000, 1473721200000, 1473807600000, 1473894000000, 1473980400000, 1474066800000, 1474153200000, 1474239600000, 1474326000000, 1474412400000, 1474498800000, 1474585200000, 1474671600000, 1474758000000, 1474844400000, 1474930800000, 1475017200000, 1475103600000, 1475190000000, 1475276400000, 1475362800000, 1475449200000, 1475535600000, 1475622000000, 1475708400000, 1475794800000, 1475881200000, 1475967600000, 1476054000000, 1476140400000, 1476226800000, 1476313200000, 1476399600000, 1476486000000, 1476572400000, 1476658800000, 1476745200000, 1476831600000, 1476918000000, 1477004400000, 1477090800000, 1477177200000, 1477263600000, 1477350000000, 1477436400000, 1477522800000, 1477609200000, 1477695600000, 1477782000000, 1477872000000, 1477958400000, 1478044800000, 1478131200000, 1478217600000] 
},{ 
"name": "numOfEmails:", 
"data": [6973, 19953, 24802, 11488, 3430, 5067, 4967, 11634, 11852, 5326, 11096, 10412, 11031, 7645, 181808, 50117, 68233, 8274, 140612, 166004, 46222, 17730, 236838, 85155, 22113, 90837, 21981, 58824, 90409, 32079, 126217, 165484, 152788, 8028, 85894, 12304, 10294, 3568, 100334, 131946, 8691, 7572, 7721, 253608, 817, 116161, 1104148, 1250817, 15616, 270738, 123211, 150237, 69436, 84920, 189798, 101596, 48121, 120699, 82919, 10025, 281948, 37501, 50315, 15240, 115791, 15799, 19682, 29942, 2128, 23952, 149181, 6535, 5] 
}] 

爲X軸,我使用type: 'datetime'但顯示日期爲00:00:00.010, 00:00:00.020, ...

enter image description here

JavaScript文件我使用來呈現圖表低於:

$(document).ready(function() { 
    var options = { 
     chart: { 
      renderTo: 'container_chart', 
      type: 'area', 
     }, 
     title: { 
      text: 'Emails received daily' 
     }, 
     subtitle: { 
      text: document.ontouchstart === undefined ? 
        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' 
      }, 

     xAxis: { 
       type: 'datetime' 
     }, 

     yAxis: { 
      title: { 
       text: 'Number received' 
      }, 
     }, 
     legend: { 
      enabled: false 
     }, 

     plotOptions: { 
      area: { 
       stacking: 'normal', 
       lineColor: '#666666', 
       lineWidth: 1, 
       marker: { 
        lineWidth: 1, 
        lineColor: '#666666' 
       } 
      } 
     }, 
     series: [] 
    } 

    $.getJSON("./emailsCaptured_c2.json", function(json) { 
    options.xAxis.categories = json[0]['data']; 
     options.series[0] = json[1]; 
     chart = new Highcharts.stockChart(options); 
    }); 
}); 

我試圖調整X軸,以:

labels: { 
    format: '{value:%d/%m/%Y}' 
    } 
} 

這是我怎麼想它的格式,但還沒有任何運氣我也試過有那樣的格式化JSON文件,而不是時代,這似乎在HighCharts工作,但不HighStock。我選擇HighStock的原因是滑塊和其他日期範圍選項。

回答

1

您所犯的錯誤是爲軸定義類別。 Highstock不支持類別軸,實際上你的數據不掀掉x值使圖表開始從0000000000000.

您可以映射值是在格式[timestamp, value] 這樣的:

var series = { 
    name: json[1].name, 
    data: (function() { 
    var data = [], i = 0, dataLen = json[0].data.length; 

    for (; i < dataLen; i++) { 
     data.push([json[0].data[i], json[1].data[i]]); 
    } 

    return data; 
    })() 
}; 

例子:https://jsfiddle.net/vqhuo3hf/1/