2016-11-04 24 views
0

ハイストックチャートを作成して1日あたりの受信メール数を表示しています。私はJavaScriptファイルをエポック日時が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

と日付を表示します。私は、毎日更新されますJSONファイルを持っている以下見ることができますチャートを描画するために使用することは以下の通りです:私はx軸を調整しようとしている

$(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); 
    }); 
}); 

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

は、私はそれをフォーマットしたいが、私もかなりHighChartsで動作しているようですEPOCH、よりそのようにフォーマットされたJSONファイルを、持っ試したすべての運を持っていなかったが、HighStockない方法です。私がHighStockを選んだ理由は、スライダーと追加の日付範囲オプションです。

答えて

1

間違いは軸のカテゴリを定義することです。 Highstockカテゴリ軸をサポートしていないと、チャートが0000000000000.

から始まるので、実際には、あなたのデータは、xの値をホーブはありませんあなたは形式でこのような[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/

関連する問題