6

我想使用 jqPlot 使用来自服务器端的 JSON 数据，如本示例中所述：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);（这个 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}

客户端的 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]]]

我总是得到error uncaught exception: [object Object] 什么是错的？有没有办法将对象转换为典型的数组形式？

谢谢

4

4 回答 4

4

我有这样的东西。我有 2 个值数组，标签。您应该从数组构造如下字符串。

        $size = count($labels);

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

或者，如果您没有 2 个数组而只有这个字符串 {"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14 :46:40":5} 您可以将 { 替换为 [ ， } 替换为 ] 和 , 替换为 ],[ 。一个肮脏但快速的解决方案。

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

于 2011-07-14T13:07:09.973 回答
4

不要在客户端解析结果，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]]]

并且是您所需要的。

于 2012-02-26T11:23:22.683 回答
1

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

所以你需要用 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/

于 2014-10-22T11:51:17.707 回答
0

带有 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>
于 2012-08-27T12:55:28.410 回答