如何反序列化dygraph本机数组格式的json日期

时间:2017-01-09 02:23:49

标签: json date datetime dygraphs json-deserialization

我最初将基于unix的整数时间戳传递给json_encode以用于dygraphs,这实际上除了一个问题外,你必须使用xaxis valueFormatter和axisLabelFormatter,并且轴上的日期/时间不会与日期/时间显示在值图例中(图表的右上角)。

这是我的原始方法,但传说是错误的,test.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></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>

现在,这是我尝试解决方案,如果您实际使用日期对象然后xaxis将与图例(http://jsfiddle.net/b0g9pd1h/)对齐,这应该可以工作,但是dygraphs无法加载,所以仍然必须是我的变量格式的问题,没有显示错误信息,所以我不确定为什么dygraphs不加载。

使用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>

另外,也许这不是最有效的方法,虽然将字符串解析为日期对象对我来说似乎非常有效,如果有人有替代解决方案,请告诉我。

1 个答案:

答案 0 :(得分:1)

如果这个答案可以帮助您解决您的问题,请点赞这篇文章,我是这个网站的新手。

我有这个工作,你必须循环并逐个修改元素,下面的解决方案工作,并且X轴和图例的值都正确显示,我可以将labelsUTC设置为true或false,它们都显示正确。关键是使用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>