2017-01-09 9 views
1

元々、iyixベースの整数タイムスタンプをjson_encodeに渡してダイグラフで使用しましたが、これは実際には1つの問題を除いて機能し、xaxis valueFormatterとaxisLabelFormatterとdate /時間は、値の凡例(チャートの右上隅)に表示されている日付/時刻と一致しません。ここdygraphのネイティブ配列形式のjson日付を逆シリアル化する方法

が伝説を除いて動作します私の独自の方法が間違っている、test.phpを:あなたが実際にその後、x軸が整列する日付オブジェクトを使用している場合今

<?php 
    $table[] = [1482407341000,92,86]; 
    $table[] = [1482407342000,92,86]; 
    $table[] = [1482407343000,91,85]; 
    $table[] = [1482407344000,92,85]; 
    $table[] = [1482407345000,91,84]; 
    $table[] = [1482407346000,90,83]; 
    $table[] = [1482407347000,91,82]; 
    $table[] = [1482407348000,92,82]; 
    $jsontable = json_encode($table); 
    echo $jsontable; 
?> 
<html><head><script type="text/javascript" src="dygraph-combined-dev.js"></script></head> 
<body><div id="graph" style="width:100%; height:96%;"></div> 
<script type="text/javascript"> 
    g = new Dygraph(document.getElementById("graph"), 
    <?=$jsontable?>, 
    { 
     legend: 'always', 
     labelsDivStyles: { 'textAlign': 'right' }, 
     labels: ['Date', 'spO2', 'pr'], 
     axes: { 
     x: { 
     valueFormatter: Dygraph.dateString_, 
     axisLabelFormatter: Dygraph.dateAxisFormatter, 
     ticker: Dygraph.dateTicker 
     } 
     } 
    }); 
</script></body></html> 

、ここでの解決策で私の試みは、あります凡例(http://jsfiddle.net/b0g9pd1h/)で、これはうまくいくはずですが、ダイアグラムが読み込まれないので、私の変数のフォーマットに問題がなければならないので、エラーメッセージは表示されないので、ダイアグラフが読み込まれない理由はわかりません。

dygraphsを使用すると、値が整数/浮動小数点数になるか、文字列/日付になるため、JSON.parse関数json_deserialize_helperを使用して、すべての文字列を日付として返し、日付を返します。オブジェクトは、コードは私に良く見えるので、私は何を間違っているのか分かりません。

test2.php:誰もが別の解決策をしてください持っている場合は、日付オブジェクトに文字列を解析すると、私にはかなり効率的なようだが、

<?php 
    $table[] = ["1482407341000",92,86]; 
    $table[] = ["1482407342000",92,86]; 
    $table[] = ["1482407343000",91,85]; 
    $table[] = ["1482407344000",92,85]; 
    $table[] = ["1482407345000",91,84]; 
    $table[] = ["1482407346000",90,83]; 
    $table[] = ["1482407347000",91,82]; 
    $table[] = ["1482407348000",92,82]; 
    $jsontable = json_encode($table); 
    echo $jsontable; 
?> 
<html><head><script type="text/javascript" src="dygraph-combined-dev.js"></script> 
<script type="text/javascript"> 
    function json_deserialize_helper(key,value) { 
    if (typeof value === 'string') { 
     return new Date(parseInt(value)); 
    } 
     return value; 
    } 
</script></head> 
<body><div id="graph" style="width:100%; height:100%;"></div> 
<script type="text/javascript"> 
    var data = <?=$jsontable?>; 
    var json = JSON.parse(data,json_deserialize_helper); 
    g = new Dygraph(document.getElementById("graph"), 
    json, 
    { 
     legend: 'always', 
     labelsDivStyles: { 'textAlign': 'right' }, 
     labels: ['Date', 'spO2', 'pr'] 
    }); 
</script></body></html> 

も、多分これは、これを行うための最も効率的な方法ではありませんお知らせ下さい。

答えて

0

この回答があなたの問題を解決するのに役立ちます、この投稿をアップしてください、私はこのサイトを初めて使っています。

私はこれを手に入れました。要素を1つずつループして変更する必要があります。以下のソリューションが動作し、X軸と凡例の値が正しく表示されます。両方とも正しく表示されます。キーは以前のように日付文字列ではなくDateオブジェクトを使用していました。

<?php 
    $table[] = [1482407341000,92,86]; 
    $table[] = [1482407342000,92,86]; 
    $table[] = [1482407343000,91,85]; 
    $table[] = [1482407344000,92,85]; 
    $table[] = [1482407345000,91,84]; 
    $table[] = [1482407346000,90,83]; 
    $table[] = [1482407347000,91,82]; 
    $table[] = [1482407348000,92,82]; 
    $jsontable = json_encode($table); 
    //echo $jsontable; 
?> 
<html><head><script type="text/javascript" src="dygraph-combined-dev.js"></script> 
</head><body><div id="graph" style="width:100%; height:100%;"></div> 
<script type="text/javascript"> 
    var data = <?=$jsontable?>; 
    //loop through json table and convert unix timestamp to date object: 
    for (var i in data) { 
     data[i][0] = new Date(data[i][0]); 
    } 
    g = new Dygraph(document.getElementById("graph"), 
    data, 
    { 
     legend: 'always', 
     labelsDivStyles: { 'textAlign': 'right' }, 
     labels: ['Date', 'spO2', 'pr'] 
    }); 
</script></body></html> 
関連する問題