6

この例で説明されているように、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) を使用しています。Web ページは配列を返します。これは、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 に答える
0

PHPjson_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 に答える