javascript-ajaxからGoogleチャートを機能させることができず、配列を取得せず、データを直接エコーすると機能します
最初の質問ですが、私はPHP / HTML/JSなどを長年コーディングしています。
私はその日のベストを検索してグーグルで検索しました。ここでこのトピックに関する複数の回答を見つけましたが、私の場合、どの解決策も役に立ちませんでした。
グーグルチャートを使用して、プレーヤーの評価に関する線グラフを作成します。 -これは、サーバー上でデータを生成し、それをページに直接印刷するときに完全に機能します。 -ajax呼び出しを使用してサーバー側のメソッドを呼び出してデータを取得すると、コンソールに「Uncaught errorNotaarray」という応答が表示されます。
データは私が見る限り同一であり、jsonは両方の場合で検証します。サーバーでjson_encodeを使用し、javascriptで$ .parseJSONを使用して、すべての組み合わせを使用せずに試しました。運がない。
これは、サーバー上でページを生成するときに、そのページが呼び出しにデータを追加するときに呼び出す方法です。これは機能します。
var data = google.visualization.arrayToDataTable(<?php echo $this->data['rating_data'] ?>);
ユーザーのリストからこれを呼び出す必要があるため、ユーザーをクリックすると、ajax呼び出しを使用してデータを取得し、javascriptでdrawChart(iID)を呼び出しますが、これは機能しません:
function drawChart(iId) {
var jsonData = $.ajax({
url: "xxxxxxxxxxx/getRatingForPlayer&playerId="+iId,
dataType: "json",
async: false
}).responseText;
var data = google.visualization.arrayToDataTable($.parseJSON(jsonData));
(上記のURLはもちろん匿名化されています) コンソールとアラートのjsonDataにあるものをダンプしました。毎回、サーバーから同じ有効なJSON応答を取得し、そのコードを呼び出しarrayToDataTableにハードに貼り付けます。これは機能しますが、変数jsonDataに配置された場合は機能しません。
上記をに変更した場合 var data = new google.visualization.DataTable(jsonData); これで、「配列ではありません」というエラーは発生しなくなりましたが、「テーブルahsnocolumns」エラーが発生します。サーバーサイドの応答は両方のユースケースで同じであるため、構文が異なる場合は、実際には書き直したくありません。 返された文字列の引用符を変更して、「」の代わりに「内部」を使用しようとしましたが、これは役に立ちません。
サーバー呼び出しから返されるデータは、ページの読み込み時に取得するか、サーバー側の呼び出しによるものであるかに関係なく、同じです。このように見えます(そして、はい、開始と終了を除いて日付値は空であると想定されています)JSONlintを介して検証し、有効なJSONとして報告します
"[['Session date','Player Rating'],['2016-10-01 00:00:00',1500],['',1519],['',1496],['',1508],['2016-11-11 16:20:39',1432]]"
上記の文字列はサーバー上で次のように生成されます(もちろん、より大きなコードの一部にすぎません):
public function getRatingForPlayer(){
$playerId = $this->request->get['playerId'];
$rating_data = $this->hov->api_user_getPlayerRatingHistory($playerId);
$sRating = $this->mapChartString($rating_data);
//$this->data['rating_data'] = json_encode($sRating, JSON_PRETTY_PRINT);
$this->response->addHeader('Content-Type: application/json');
$this->response->setOutput(json_encode($sRating, JSON_NUMERIC_CHECK));
}
public function mapChartString($data){
$last = sizeof($data['rating'])-1;
$string = "[['Session date','Player Rating'],";
foreach ($data['rating'] as $key => $value) {
if( ($key == 0) || ($key == $last)){
$date_string = $data['created'][$key];
}else{
$date_string = '';
}
$string .= "['".$date_string."',".$value."],";
}
$string = rtrim($string, ",");
$string .= "]";
return $string;
}
上記のように、echo / printを使用してページに配置すると、これからの出力は完全に機能しますが、ajax呼び出しからの出力であり、js変数に配置されるためではありません。これは、返されたデータが視覚的に同一であり、両方が検証されている場合でも同様です。
明らかにまったく機能しなかった$.parseJSON(jsonData)を使用する前および/または使用した後、jsonオブジェクトを配列に再マッピングしようと必死になりました。
それで、この時点で私は困惑しています。 質問はこれに完全に対応しています。 Google Chart-キャッチされないエラー:配列ではありません ここで、サーバー上で適切にエンコードするためのヒントから$ .parseJSON(jsonData)を取得しました。しかし、それは役に立たないので、私はここで何か他のものを見逃している必要があります。
すべての助けに感謝します。 /ダン
答え :
解決策:
当然のことながら、質問を投稿すると、その周りで違った考え方をするようになります。 Qを投稿した直後に解決しました。
私は次のことをしました: arrayToDataTableの呼び出しとそれに続くチャートを描画するための呼び出しは直接起動するため、まだajax呼び出しから入力されていない可能性があります。 そこで、ajax呼び出しのsuccess-memberにコールバックを追加し、すべての呼び出しをそれに移動しました。これは、ajaxが実際に何かを返したことを確認するためです。 このように:
function drawChart(iId) {
var jsonData = $.ajax({
url: "XXXXXXXXXXXX/getRatingForPlayer&playerId="+iId,
dataType: "json",
async: false ,
success: function(jsonData) {
var data = google.visualization.arrayToDataTable($.parseJSON(jsonData));
var options = {
backgroundColor: 'transparent',
colors:['#73B322'],
explorer: { actions: ['dragToZoom', 'rightClickToReset'] },
legend:{position: 'top', textStyle: {color: '#73B322', fontSize: 16}},
hAxis: {textStyle:{color: '#C9E093'}},
vAxis: {textStyle:{color: '#C9E093'}}
};
var chart = new google.visualization.LineChart(document.getElementById('rating_chart'));
chart.draw(data, options);
}
}).responseText;
これにより、予期しないトークンのJSONエラーが発生しました。これは、PHPコードで解決され、生成されたjson内の文字列を囲むために「の代わりに」を返します。
そして今、それはすべて私が期待したように機能します。 ソリューションが他の誰かに役立つことを願っています。 /ダン
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。