jquery - jqueryを使用してjsonarraryを呼び出す際の空白ページのハイチャート

Question

私はphpページ（array.php）を持っています。ブラウザでは、array.phpがffの結果を生成します

[{"name":"London","data2":["70","19"]},{"name":"Tokyo","data2":["60","18"]}]

array.phpページ

<?php
//header("Content-type: text/json");
header("Content-type: application/json");


$db = mysql_connect("localhost", "username", "userpasswd"); 
mysql_select_db("weather",$db);
$query = "SELECT * FROM measures";

$result = mysql_query($query,$db);

while($row = mysql_fetch_array($result))
{
$h = $row["humidity"];
$w = $row["windspeed"];
$t = $row["temperature"];
$c = $row["city"];
$ar1[] = array("name" =>$c,"data2"=>[$h,$t]);
}
echo json_encode($ar1);

?>

jqueryページのコードは

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="./js/highcharts.js"></script>

<script type="text/javascript">

var chart = null;      // global
$(document).ready(function() {
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column',
        events: {
            load: requestData
        }
    },
    title: {
        text: 'Real time data from database'
    },
    xAxis: {
            categories: []
        },
    yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
            text: 'Value',
            margin: 80
        }
    },
    series: []
});        
});

/**
 * Request data from the server
 */
function requestData() {

$.ajax({
    url: 'array.php',
    success: function(point) {

    $.each(point, function(i,item){
        var series_name = item.name;
        var series_data = item.data2;

        var series = {data: []};

        chart.xAxis.categories.push(series_name);
        //chart.series.data.push(item.data2);

        $('body').append( "Name: " + series_name);
        alert(series_data);

    });


    },
    cache: false
});
}

</script>

</head>

<body>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

ただし、コードは完全ではありません。しかし、エラーが修正されるまで、私は先に進むことができません。htmlコードを実行すると、array.phpからの各データをループしてアラートを出すことにより、アラート機能が適切に機能します。しかし、コメントを外すと

//chart.xAxis.categories.push(series_name); or //chart.series.data.push(item.data2);

その後、アラート機能は機能しなくなります。変数（チャート）を認識していないような気がします。私は前にそれを宣言しました

$(document).ready(function() {

グローバル変数になりますが、そうではないようです。

どうか、本当に助けが必要です。私はこれに何日も取り組んでいますが、成功していません。深く感謝いたします。よろしくお願いします-エマ

score 1 · Accepted Answer

本当に Ajax 呼び出しを行う必要がありますか? phpでページ処理中にデータをpushできませんか? Ajaxではなく、ロード時にデータをロードしようとしているだけです。ダイレクトphpをお勧めします。

あなたの問題に関する限り、アクセスしようとしている時点でチャートはインスタンス化されていません。私はあなたの問題を再現しようとしました@ http://jsfiddle.net/jugal/Zjket/以下は私の発見です

ここに画像の説明を入力

このrequestDataメソッドは、Highchart のコンストラクターの呼び出し中に呼び出されます。そう？これは、コンストラクターの呼び出しがまだ完了していないことを意味します。したがって、オブジェクト ( chart) はまだインスタンス化されていません。Highchart は、コンストラクターへの 2 番目のパラメーターとしてコールバックメソッドを持つこともサポートします。これは、構築後に呼び出されます (ただし、コンストラクターからは、内部的にチャートの準備ができているだけですが、コンストラクター呼び出しはまだ呼び出し元に返されていません)。chart = new Highcharts.Chart({...},requestData)しかし、同じ問題が続きます。変？実際には、requestData メソッドはチャートオブジェクトをコンテキストとして呼び出されます。これは、chart変数を使用して「チャート」を参照することはできませんが、requestData の呼び出し元thisとしてアクセスできることを意味します。chart

残念ながら、問題は次のレベルに達しましたが、グラフにはまだデータが表示されません。新しいエラーは、json[{"name":"London","data2":["70","19"]},{"name":"Tokyo","data2":["60","18"]}]のフォーマットが正しくないためです。数値は引用符で囲んではいけません。代わりに[{"name":"London","data2":[70,19]},{"name":"Tokyo","data2":[60,18]}]、変換する必要があります。値を数値に変換してから、json_encode に渡します。これを修正した後、いくつかのエラーが発生しました。また、シリーズをchart.seriesオブジェクトにプッシュすることは実際には想定されていません。代わりにchart.addSeries(...)@ http://www.highcharts.com/stock/ref/#seriesを使用してください。

さらにいじってデバッグすると、このソリューションにたどり着きましたhttp://jsfiddle.net/jugal/JfgxX/

 function requestData() {
 chart=this;
 $.ajax({
url: 'array.php',
success: function(point) {
    $.each(point, function(i,item){
    var series_name = item.name;
    var series_data = item.data2;
    var series = {data: item.data2,name:series_name};
    chart.addSeries(series);
});


},
cache: false
});
  }

EDIT @wergeldが言及したように、アプローチの別の代替手段として、最初にAjax呼び出しを行い、次にその呼び出しの成功に関するチャートを作成することができます。フィドル@ http://jsfiddle.net/jugal/j4ZYB/

 var chart=null;
$(function() {
   requestData();
});

function requestData() {
     $.ajax({
    url: 'array.php',
     success: function(point) {
      var chartSeriesData=[];
         $.each(point, function(i,item){
         var series_name = item.name;
         var series_data = item.data2;     
         var series = {data: item.data2,name:series_name};
        chartSeriesData.push(series);
        });
     chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'      ,      

    },
    title: {
        text: 'Real time data from database'
    },
    xAxis: {
            categories: []
        },
    yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
            text: 'Value',
            margin: 80
        }
    },
    series: chartSeriesData
});         
},
cache: false
});
  }

}

score 0 · Accepted Answer

データが作成される前に、データをグラフにプッシュしようとしているようです。はい、チャートをNULLとして宣言していますが、チャート変数は、それが何であるかを知らないときに、データがプッシュされることになっていることをどのように認識しますか？ページの実行順序は次のようです。

チャートを宣言する
ajaxを介してデータを取得する
データをグラフにプッシュ
チャートをHighcharts.Chartとして宣言します

$(document).ready(function() {ajax呼び出しからデータを取得してから、呼び出し内でデータのチャートにプッシュしてみませんか。このように、操作の順序は次のようになります。

ajaxを介してデータを取得する
チャートをHighcharts.Chartとして宣言します
データをグラフにプッシュ

jquery - jqueryを使用してjsonarraryを呼び出す際の空白ページのハイチャート

2 に答える 2

Related

Reference