JSON用于jqPlot

Question

我希望使用从服务器端以JSON格式传来的数据来使用jqPlot，就像这个例子中所描述的那样：http://www.jqplot.com/tests/data-renderers.php 我的代码与示例几乎相同：

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'}
          }
      },
  });

在服务器端，我使用的是PHP（和Yii框架）。网页返回一个数组，通过使用CJSON::encode($resultArray);将其编码为JSON格式（这是Yii函数传递给PHP JSON编码函数）。 PHP脚本的结果如下所示：

{"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14:46:40":5}

客户端的 Ajax 请求解决了类似以下内容的问题（来自console.info();输出）。

Object { 2011-04-25 14:46:40=2,  2011-04-26 14:46:40=3, ...}

很可能，jqPlot期望以下格式：

[[["2011-04-25 14:46:40":0],["2011-04-26 14:46:40",3],["2011-04-27 14:46:40",0]]]

我经常遇到错误信息：uncaught exception: [object Object]，这是怎么回事呢？有没有办法将该对象转换成典型的数组形式？

谢谢！

- The Bndr

Answer 1

我有类似这样的东西。我有两个数组，一个是值，一个是标签。你需要从这些数组中构建以下字符串。

        $size = count($labels);

        for ($i = 0; $i < $size; $i++) {
            $result = $result . "['" . $labels[$i] . "'," . $values[$i] . "]";
            if($i != $size -1 ){
                $result = $result . ",";
            }
        }

如果您没有两个数组，只有以下字符串 {"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14:46:40":5} ，您可以将 { 替换为 [ ，} 替换为 ]，并且用 ],[ 替换逗号。这是一个不太规范但快速的解决方案。

在上述代码之后，您可能需要在两侧附加 '[' 和 ']' 并返回值。

- Pit Digger

---

我认为，在 PHP 端构建一个类似 JS 数组的字符串更像是一种解决方法。但这是唯一可行的方式。顺便说一下，我必须在客户端使用 eval 来“解析”该字符串。也就是说：resultArray=eval(data)。 - The Bndr

对于初学者来说，这可能很愚蠢，但是jqPlot希望数据以[[val1，val2，val3]]格式提供。感谢这里的提示。 - kontur

Answer 2

不要在客户端解析结果，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, ...)"

结果看起来像这样：

[[[1,2],[3,5],[4,7],[5,12],[7,23]]] 

并且正是你所需要的。

- dee38

Answer 3

来自http://www.jqplot.com/tests/date-axes.php：

请注意，尽管jqPlot可以解析大多数可读日期，但最好在可能的情况下使用JavaScript时间戳。此外，最好指定日期和时间而不仅仅是日期。这是因为裸露的日期与本地时间与UTC的浏览器处理不一致。

网站提供的示例数据：

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]];

所以您需要一个由两个元素数组填充的数组。第一个字符串是日期（如果可以使用时间戳），第二个是X值。我尝试查找日期时间解析的输入格式或类似的内容，但没有结果。

您生成了

{"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14:46:40":5}

这是一个有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上是有效的 - 因此不需要时间戳 ;) http://jsfiddle.net/zpygcvps/1/

- Jacob Sobus

Answer 4

使用PHP的json_encode函数生成正弦曲线

服务器端

<?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;

?>

客户端

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

- rjha94