3

Rickshawを使用していくつかのチャートを作成し、php で生成された ajax を使用してデータをインポートしようとしています。

静的データを使用すると、グラフが表示されます。PHP で生成されたデータを (console/log() から) コピー/貼り付けすると、グラフが表示されます。データを変数に入れて、その変数をjsで使用しようとすると、うまくいきません。:(

これは、.php から取得したコンソール ログです: (先ほど言ったように、そのコード ブロックを .js にコピーして貼り付け、"dataOutEvo" var を置き換えると、グラフは正常に表示されます。データが問題だとは思わない。

[
        {
            name: "ligne",
            data: [{x:0,y:35},{x:1,y:34},{x:2,y:36},{x:3,y:35},{x:4,y:40},{x:5,y:35},{x:6,y:37},{x:7,y:40},{x:8,y:45},{x:9,y:46},{x:10,y:55},{x:11,y:63},{x:12,y:61},{x:13,y:45},{x:14,y:48},{x:15,y:49},{x:16,y:45},{x:17,y:44},{x:18,y:52},{x:19,y:43},{x:20,y:37},{x:21,y:36},{x:22,y:37},{x:23,y:34}],
            color: palette.color()
        },
        {
            name: "ligne",
            data: [{x:0,y:10},{x:1,y:15},{x:2,y:13},{x:3,y:15},{x:4,y:14},{x:5,y:16},{x:6,y:17},{x:7,y:25},{x:8,y:23},{x:9,y:24},{x:10,y:25},{x:11,y:28},{x:12,y:27},{x:13,y:21},{x:14,y:23},{x:15,y:19},{x:16,y:18},{x:17,y:16},{x:18,y:15},{x:19,y:14},{x:20,y:15},{x:21,y:16},{x:22,y:15},{x:23,y:16}],
            color: palette.color()
        },
        {
            name: "ligne",
            data: [{x:0,y:45},{x:1,y:49},{x:2,y:49},{x:3,y:50},{x:4,y:54},{x:5,y:51},{x:6,y:54},{x:7,y:65},{x:8,y:68},{x:9,y:70},{x:10,y:80},{x:11,y:91},{x:12,y:88},{x:13,y:66},{x:14,y:71},{x:15,y:68},{x:16,y:63},{x:17,y:60},{x:18,y:67},{x:19,y:57},{x:20,y:52},{x:21,y:52},{x:22,y:52},{x:23,y:50}],
            color: palette.color()
        },
        {
            name: "ligne",
            data: [{x:0,y:10},{x:1,y:15},{x:2,y:12},{x:3,y:5},{x:4,y:9},{x:5,y:15},{x:6,y:45},{x:7,y:125},{x:8,y:345},{x:9,y:256},{x:10,y:312},{x:11,y:345},{x:12,y:299},{x:13,y:165},{x:14,y:354},{x:15,y:368},{x:16,y:254},{x:17,y:213},{x:18,y:312},{x:19,y:165},{x:20,y:54},{x:21,y:32},{x:22,y:10},{x:23,y:5}],
            color: palette.color()
        },
        {
            name: "ligne",
            data: [{x:0,y:2},{x:1,y:3},{x:2,y:2},{x:3,y:1},{x:4,y:1},{x:5,y:2},{x:6,y:3},{x:7,y:15},{x:8,y:45},{x:9,y:27},{x:10,y:40},{x:11,y:42},{x:12,y:35},{x:13,y:18},{x:14,y:42},{x:15,y:40},{x:16,y:30},{x:17,y:25},{x:18,y:40},{x:19,y:20},{x:20,y:6},{x:21,y:4},{x:22,y:2},{x:23,y:1}],
            color: palette.color()
        }
        ]

そして、これは何かがうまくいかないjsです:

$(document).ready(function(){ 

  $.ajax({    
    url: 'dataOutEvo.php', //le fichier qui va nous fournir la réponse      
    success: function(data) {    
        var dataOutEvo = data;
         console.log(dataOutEvo);
        var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2001' } );
        var graph = new Rickshaw.Graph({
          element: document.querySelector("#chart"),
          width: 960,
          height: 260,
          renderer: 'line',
          series:  dataOutEvo
        });

        graph.render();

        }
  });

});

誰が何がうまくいかないのか教えてもらえますか? ありがとう:)マチュー

これを使用して、別の方法に進むべきではないかどうかを今自問しています：

$fp = fopen('dataoutevo.json', 'w');
fwrite($fp, json_encode($js));
fclose($fp);

この ：

var palette = new Rickshaw.Color.Palette();
new Rickshaw.Graph.Ajax( {

  element: document.getElementById("chart"),
  width: 800,
  height: 500,
  renderer: 'line',
  dataURL: 'dataoutevo.json',
  onData: function(d) {
    Rickshaw.Series.zeroFill(d);
    return d;
  },
  onComplete: function(transport) {
    var graph = transport.graph;
    var detail = new Rickshaw.Graph.HoverDetail({  graph: graph  }); 
  } 

  } );

しかし、それはまだ機能していません...誰かが私を助けて、私が間違っていることを教えてくれますか?

4

2 に答える 2

0

最初の実装では、dataType を ajax 呼び出しに追加します。

これはうまくいくはずです：

$(document).ready(function(){ 
  $.ajax({    
    url: 'dataOutEvo.php', //le fichier qui va nous fournir la réponse
    dataType: 'json',
    success: function(data) {    
        var dataOutEvo = data;
        console.log(dataOutEvo);
        var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2001' } );
        var graph = new Rickshaw.Graph({
          element: document.querySelector("#chart"),
          width: 960,
          height: 260,
          renderer: 'line',
          series:  dataOutEvo
        });
        graph.render();
        }
    });
});

$.ajax 呼び出しの dataType : 'json'に注意してください。

JQueryのドキュメントによると、jsonのdataTypeを追加すると、

レスポンスを JSON として評価し、JavaScript オブジェクトを返します。JSON データは厳密な方法で解析されます。不正な形式の JSON は拒否され、解析エラーがスローされます

于 2014-12-04T18:42:26.703 に答える
0

最初の実装を使用しても問題なく動作するはずです。あなたの問題は、あなたが電話したときだと思います：

success: function(data) {

PHP から返されるデータ変数は、実際には文字列です (これは Javascript 関数を使用して確認できます) -

console.log(typeof(data));

PHPコードでは、（連想）配列を返す必要があり、json_encode（）関数を使用していることを確認してください-

echo json_encode($output);

そして、JS 側で JSON.parse メソッドを使用して返されたデータをキャストします -

var json_data = JSON.parse(data);

それが役立つことを願っています!

于 2014-03-13T18:58:41.323 に答える