如何反序列化 dygraph 本机数组格式的 json 日期
How to deserialize json date for dygraph native array format
我最初将基于 unix 的整数时间戳传递给 json_encode 以用于 dygraphs,这实际上有效,除了一个问题,然后你必须使用 xaxis valueFormatter 和 axisLabelFormatter 以及 date/time轴上的值不会与值图例(图表右上角)中显示的 date/time 对齐。
这是我原来的方法,除了图例是错误的,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>
现在,这是我尝试的解决方案,如果您实际使用日期对象,则 x 轴将与图例对齐 (http://jsfiddle.net/b0g9pd1h/),这应该可行,但 dygraphs 无法加载,所以一定是我的变量格式有问题,没有显示错误消息所以我不确定为什么 dygraphs 没有加载。
对于 dygraphs,您的值要么是 integer/float,要么是 string/date,因此使用我的 JSON.parse 函数 json_deserialize_helper 我正在治疗所有字符串作为日期并尝试 return 日期对象,代码对我来说看起来不错,所以我不确定我做错了什么。
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>
此外,也许这不是最有效的方法,尽管将字符串解析为日期对象对我来说似乎非常有效,如果有人有替代解决方案,请告诉我。
如果这个答案可以帮助您解决您正在处理的问题,请给这个投票post,我是这个网站的新手。
我成功了,你必须循环遍历并一个一个修改元素,下面的解决方案有效,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>
我最初将基于 unix 的整数时间戳传递给 json_encode 以用于 dygraphs,这实际上有效,除了一个问题,然后你必须使用 xaxis valueFormatter 和 axisLabelFormatter 以及 date/time轴上的值不会与值图例(图表右上角)中显示的 date/time 对齐。
这是我原来的方法,除了图例是错误的,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>
现在,这是我尝试的解决方案,如果您实际使用日期对象,则 x 轴将与图例对齐 (http://jsfiddle.net/b0g9pd1h/),这应该可行,但 dygraphs 无法加载,所以一定是我的变量格式有问题,没有显示错误消息所以我不确定为什么 dygraphs 没有加载。
对于 dygraphs,您的值要么是 integer/float,要么是 string/date,因此使用我的 JSON.parse 函数 json_deserialize_helper 我正在治疗所有字符串作为日期并尝试 return 日期对象,代码对我来说看起来不错,所以我不确定我做错了什么。
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>
此外,也许这不是最有效的方法,尽管将字符串解析为日期对象对我来说似乎非常有效,如果有人有替代解决方案,请告诉我。
如果这个答案可以帮助您解决您正在处理的问题,请给这个投票post,我是这个网站的新手。
我成功了,你必须循环遍历并一个一个修改元素,下面的解决方案有效,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>