javascript jqPlot 的 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6693579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSON for jqPlot
提问by The Bndr
I would like to use jqPlot usinge data from server side coming in JSON, like described in this example: http://www.jqplot.com/tests/data-renderers.php
我想使用 jqPlot 使用来自服务器端的 JSON 数据，如本例中所述：http://www.jqplot.com/tests/data-renderers.php
My code is nearly the same like the example:
我的代码与示例几乎相同：
function myGraph(jsonurl) {
var ajaxDataRenderer = function(url, plot, options) {
var ret = null;
$.ajax({
// have to use synchronous here, else the function
// will return before the data is fetched
async: false,
url: url,
dataType:"json",
success: function(data) {
ret=data;
console.warn(data);
}
});
return ret;
};
var plot1 = $.jqplot('chartdiv', jsonurl, {
title: 'myTitle',
dataRenderer: ajaxDataRenderer,
dataRendererOptions: { unusedOptionalUrl: jsonurl },
series: [{
label: 'myLabel',
neighborThreshold: -1
}],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
// min:'August 1, 2010 16:00:00',
tickInterval: '2 months',
tickOptions:{formatString:'%Y-%m-%d.%H:%M:%S'}
},
yaxis: {
tickOptions:{formatString:'$%.2f'}
}
},
});
On server side i'm using PHP (and Yii). The webpage returns an array, which is encoded to JSON by using CJSON::encode($resultArray);(this Yii function passed trough to the PHP JSON encode function).
The Results from the PHP script lookes like that:
在服务器端，我使用 PHP（和 Yii）。该网页返回一个数组，该数组通过使用CJSON::encode($resultArray);（此 Yii 函数通过 PHP JSON 编码函数传递）被编码为 JSON 。PHP 脚本的结果如下所示：
{"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14:46:40":5}
The Ajax request on client side resolved something like this (output from console.info();)
客户端的 Ajax 请求解决了这样的问题（来自 的输出console.info();）
Object { 2011-04-25 14:46:40=2, 2011-04-26 14:46:40=3, ...}
Probably, jqPlot expect the following format:
可能，jqPlot 期望以下格式：
[[["2011-04-25 14:46:40":0],["2011-04-26 14:46:40",3],["2011-04-27 14:46:40",0]]]
All the time i get the error uncaught exception: [object Object]What is wrong?
Is there a way to convert the object for to the typical array form?
我error uncaught exception: [object Object]总是得到什么是错的？有没有办法将对象转换为典型的数组形式？
Thank you
谢谢
采纳答案by Pit Digger
I have something like this . I had 2 arrays for values,labels .You should construct string as below from arrays .
我有这样的事情。我有 2 个用于值和标签的数组。您应该从数组构造如下字符串。
$size = count($labels);
for ($i = 0; $i < $size; $i++) {
$result = $result . "['" . $labels[$i] . "'," . $values[$i] . "]";
if($i != $size -1 ){
$result = $result . ",";
}
}
OR if you dont have 2 arrays and just have this string {"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14:46:40":5} you can replace { with [ , } with ] and , with ],[ . A dirty but quick solution .
或者，如果您没有 2 个数组而只有这个字符串 {"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14 :46:40":5} 你可以用 [ , } 用 ] 和 , 用 ],[ 替换 { 。一个肮脏但快速的解决方案。
After above code you might need to append '[' and ']' on both sides and return value.
在上面的代码之后，您可能需要在两侧附加 '[' 和 ']' 并返回值。
回答by dee38
Do not parse the result on the client side, jquery will do much better. Actually, the array you need for jqplot is in fact valid json. All you have to do is prepare your data and create the appropriate array structure in PHP:
不要在客户端解析结果，jquery 会做得更好。实际上，jqplot 所需的数组实际上是有效的 json。您所要做的就是准备数据并在 PHP 中创建适当的数组结构：
$pairs = array(1=>2, 3=>5, 4=>7, 5=>12, 7=>23); // simple example
$result = array();
foreach ($pairs as $label => $value) {
$result[] = array($label,$value); // make a "small" array for each pair
}
echo json_encode(array($result)); // wrap the result into another array; multiple plot data go like "array($result, $result2, ...)"
The result looks like this:
结果如下所示：
[[[1,2],[3,5],[4,7],[5,12],[7,23]]]
and is excatly what you need.
这正是您所需要的。
回答by Jacob Sobus
From http://www.jqplot.com/tests/date-axes.php
来自http://www.jqplot.com/tests/date-axes.php
Note, although jqPlot will parse most any human readable date, it is safest to use javascript time stamps when possible. Also, it is best to specify a date and time and not just a date alone. This is due to inconsistent browser handling of local time vs. UTC with bare dates.
请注意，尽管 jqPlot 将解析大多数人类可读的日期，但在可能的情况下使用 javascript 时间戳是最安全的。此外，最好指定日期和时间，而不仅仅是日期。这是由于浏览器对本地时间与带有裸日期的 UTC 的处理不一致。
And example data from site:
来自站点的示例数据：
var line1=[['2008-09-30 4:00PM',4], ['2008-10-30 4:00PM',6.5], ['2008-11-30 4:00PM',5.7], ['2008-12-30 4:00PM',9], ['2009-01-30 4:00PM',8.2]];
So you need array filled with 2 element arrays. First string with date (use timestamp if can) and X value. I've tried to find input format for datetime parsing or something like that but with no result.
所以你需要用 2 个元素数组填充的数组。第一个带有日期的字符串（如果可以，请使用时间戳）和 X 值。我试图为日期时间解析或类似的东西找到输入格式，但没有结果。
You generated
你产生了
{"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14:46:40":5}
{"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14:46:40":5}
which is object with 3 fields. First field name is "2011-04-25 14:46:40" and it's value set to 2. You need to generate array like this:
这是具有 3 个字段的对象。第一个字段名称是“2011-04-25 14:46:40”，其值设置为 2。您需要像这样生成数组：
[["2011-04-25 14:46:40", 0],["2011-04-26 14:46:40", 3],["2011-04-27 14:46:40", 0]]
JSFiddle with your data seems to work - so don't need timestamps ;) http://jsfiddle.net/zpygcvps/1/
JSFiddle 与您的数据似乎工作 - 所以不需要时间戳;) http://jsfiddle.net/zpygcvps/1/
回答by rjha94
sine curve with PHP json_encode function
带 PHP json_encode 函数的正弦曲线
server side
服务器端
<?php
$y = array();
$index = 0 ;
for($x = 0 ; $x< 13 ; $x += 0.5) {
$y[$index] = sin($x);
$index++ ;
}
$series = array();
$series[0] = $y ;
$data = json_encode($series);
echo $data;
?>
client side
客户端
<script type="text/javascript">
$(document).ready(function(){
var ajaxDataRenderer = function(url, plot, options) {
var ret = null;
$.ajax({
async: false,
url: url,
dataType:"json",
success: function(data) {
ret = data;
}
});
return ret;
};
// The url for our json data
var jsonurl = "/test/chart/jqplot-data.php";
var plot2 = $.jqplot('chartdiv', jsonurl,{
title: "AJAX JSON Data Renderer",
dataRenderer: ajaxDataRenderer,
dataRendererOptions: {
unusedOptionalUrl: jsonurl
}
});
});
</script>
