1

私は次のコードを持っています：

$.ajax({
    async: false,
    url: 'chart_data.php',
    data: {'option':'high', 'id':id},
    dataType: 'json',
    success: function(response){
        alert('in');
        var data = google.visualization.arrayToDataTable(response);
        var options= { curveType:'none', width: 300, height: 200, hAxis: {title:'Years'}, vAxis: {title:'Value'}, title: 'High Time - Low Value' };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);  
    }
});

ウェブページで。ドロップダウンメニューに基づいてチャートを表示したいのですが。関数の残りの部分は問題なく機能します。Firebugをチェックインすると、JSON応答に200OKステータスメッセージが表示されます。実際、FirebugではすべてのJSONを問題なく見ることができます。

問題は残っています、なぜalert('in');トリガーされないのですか、そしてなぜグーグルはそれのチャートを関連するチャートdivにロードしないのですか？

編集：

エラーコールバックを追加すると、次のエラーが発生します。parseerror SyntaxError：JSON.parse：予期しない文字。

これはサーバーからのJSON応答です。

[['Year', 'Low', 'High'],['1984', 318000, 395000],['1984', 418000, 495000],
['1984', 380000, 450000],['1984', 410000, 460000],['1984', 410000, 460000],
['1985', 435000, 485000],['1985', 435000, 485000],['1985', 435000, 485000],
['1985', 435000, 485000],['1985', 435000, 485000],['1985', 435000, 485000],
['1985', 435000, 485000],['1985', 435000, 485000],['1985', 318000, 395000],
['1985', 418000, 495000],['1985', 380000, 450000],['1985', 420000, 470000],
['1985', 420000, 470000]]

JSON構造については100％確実ではありませんが、私には正しいように見えます。

編集：

いくつか変更を加えましたが、もう少し進んでいるようです。まず、header('Content-type: application/json');phpスクリプトからその行を削除しました。次に、をに変更しdataType: 'json'ましたdataType: 'html'。

$ .ajax（）呼び出しで成功コールバックをロードするようになりました。GoogleのarrayToDataTable（）メソッドに送信しようとしたときのテキスト応答が気に入らない。

返された文字列（実際にはJSON応答ではない上記のJSON応答のように見えます）をJavaScript配列に解析することができれば、私は黄金になります。私は願います。

編集：

成功コールバックでevalステートメントを使用して、http応答を配列に変換することになりましたeval('var res = ' + response);。これはおそらくこれを行うための最良の方法ではありません。誰かがこれを行うためのより良い（そしてより安全な）方法を持っているなら、それは素晴らしいことです。

編集：

evalステートメントを使用するのはあまり好きではなかったので、戻り文字列を配列に変更する他の方法を調べました。この小さな宝石に出くわすまで、私はそれらのどれも本当に気にしませんでした：

response = JSON.parse(response);

これは問題なく機能します。

皆様のご協力に感謝いたします。

4

2 に答える 2

1

JSONのフォーマットにエラーがあります。文字列は一重引用符（'）ではなく二重引用符（ "）である必要があります

JSOnが有効であることを確認したい場合は、これを使用できます

于 2012-06-20T20:25:06.250 に答える
1

まだ誰も答えていないので、ここで試してみます。エラーメッセージとajax呼び出しから取得した戻り値で更新したようです。

問題は、受け取っているのがJSONオブジェクトではなく、javascript配列であるということです。JSONオブジェクトは中括弧{と}で囲まれ、配列は角括弧[と]で囲まれます。

適切なJSONオブジェクトを返すようにajax経由で呼び出すスクリプトを変更する必要があります（ phpでjson_encodeを使用すると非常に便利です）。

応答を次のように表示する必要があります。

{"data":[["Year", "Low", "High"],["1984", 318000, 395000],["1984", 418000, 495000],
["1984", 380000, 450000],["1984", 410000, 460000],["1984", 410000, 460000],
["1985", 435000, 485000],["1985", 435000, 485000],["1985", 435000, 485000],
["1985", 435000, 485000],["1985", 435000, 485000],["1985", 435000, 485000],
["1985", 435000, 485000],["1985", 435000, 485000],["1985", 318000, 395000],
["1985", 418000, 495000],["1985", 380000, 450000],["1985", 420000, 470000],
["1985", 420000, 470000]]}

グーグルによると、彼らはこのようなものを探しています：

{
   cols: [{id: 'task', label: 'Task', type: 'string'},
          {id: 'hours', label: 'Hours per Day', type: 'number'}
   ],
   rows: [{c:[{v: 'Work'}, {v: 11}]},
          {c:[{v: 'Eat'}, {v: 2}]},
          {c:[{v: 'Commute'}, {v: 2}]},
          {c:[{v: 'Watch TV'}, {v:2}]},
          {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
   ]
 }

したがって、最初にこの構造に従うために、実際にデータを作り直す必要があるのではないでしょうか。このようなもの：

{
  "cols": [{"id":"year", "label":"Year", "type":"string"},
         {"id":"low",  "label":"Low",  "type":"string"},
         {"id":"high", "label":"High", "type":"string"}],
  "rows": [{"c":[{"v":"1984"}, {"v":"318000"}, {"v":"395000"}]},
         {"c":[{"v":"1984"}, {"v":"418000"}, {"v":"495000"}]},
         {"c":[{"v":"1984"}, {"v":"380000"}, {"v":"450000"}]},
         {"c":[{"v":"1985"}, {"v":"420000"}, {"v":"470000"}]}]
}

JSONが少しわかりにくいと思われる場合は、 http：//www.json.org/で詳細を読むことができます。

編集

.arrayToDataTable（）関数の呼び出しを見落としたことを考えると、Googleのドキュメントからこの例を引用する必要があったと思います（リンクはすでに上記で参照されています）。

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  ['Country', 'Population', 'Area'],
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

アレイは次のように入力されるため、次のようになります。

[['Year', 'Low', 'High'],
 ['1984', 318000, 395000],
 ['1984', 418000, 495000],
 ['1984', 380000, 450000],
 ['1984', 410000, 460000],
 ['1984', 410000, 460000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 318000, 395000],
 ['1985', 418000, 495000],
 ['1985', 380000, 450000],
 ['1985', 420000, 470000],
 ['1985', 420000, 470000]]

これは適切にフォーマットされているように見えますが、実際にはJSONオブジェクトではなく配列を返すため、ajax呼び出しの「dataType」を「json」ではなく「text」に変更してみてください。これで問題が解決するはずです。

于 2012-06-15T16:16:08.090 に答える