web-dev-qa-db-ja.com

ajax / jsonおよびPHP）に関するハイチャートデータシリーズの問題

これはここでの私の最初のリクエストであり、この同じ問題に関する他の関連する投稿の多くを読んだことがありますが、私はまだ行き詰まっていて、これについてはほとんど気が遠くなっています...だからどんな助けも大歓迎です！

Page1.phpに次のHighchartsオブジェクトがあり、AJAXを使用して、ページの読み込み時とドロップダウンオプションが変更されたときにPage2.phpからデータを取得しています。

（読みやすくするために切り捨てられています）：

$(document).ready(function() {

   var e = document.getElementById("selOption"); //<--- This is the dropdown
   var domText = e.options[0].text;
   var domID = e.options[e.selectedIndex].value;

   var options = {
      chart: {
         renderTo: 'linechart',
         type: 'line'
      },
      title: {
         text: 'Title for ' + domText
      },
      subtitle: {
         text: ''   
      },
      xAxis: {
         type: 'datetime',
         dateTimeLabelFormats: {
            month: '%b %e, %Y',
            year: '%Y'
         }
      },
      yAxis: {
         title: {
            text: 'Important Values'
         },
         reversed: true,
         min: 0,
         max: 100
      },
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.series.name +'</b><br/>'+
               Highcharts.dateFormat('%b %e', this.x) +': '+ this.y;
         }
      },
      series: []

};

$.get('Page2.php?domID=' + domID,function(data) {
    $.each(data, function(key,value) {
        //var series = {};
        //series.name.Push(value);
        //series.data.Push([value]);
        options.series.Push(data);
        //alert(data);
    });

    var linechart = new Highcharts.Chart(options);
});

});

Page2.phpには、jsonを返す次のメッセージがあります。

$sqlSelect = "SELECT Item1,Item2,Item3 FROM... ";
$result = mysql_query($sqlSelect);

while ($item = mysql_fetch_assoc($result)) {            
    $name = $item['Item1'];
    $date = str_replace("-",",",$item['Item2']);
    $pos = $item['Item3'];

    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],");
    echo json_encode($arr);         
}

私のjsonリターンは次のようになります：

{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"}
{"name":"Item1","data":"[Date.UTC(2011,11,08), 2 ],"}

チャートが読み込まれると、下部に135のシリーズ名（？！？！？！）が入力され、折れ線グラフにポイントが表示されません。

二重引用符を削除し、結果をシリーズ配列にハードコーディングすると、うまく機能します（ただし、例ではオブジェクト間にコンマがないように見えます。

すべての助けをありがとう...特に迅速な返信！ ;-)

phpjqueryajaxjsonhighcharts
11
gtr1971

解決済み：

私はついにうまくいった答えを見つけました！ Highchartsによって十分に文書化されていなかったため、数日かかったことに苛立ちました（および/またはjQuertとJavaScriptについての私の理解はまだ初心者レベルです）。

答えはしない X/Yデータをjsonオブジェクトの事前に形成された配列として送信するのではなく、単にjsonオブジェクトのカンマ区切り値のリストとして日付（x値）と値（y値）を構成する数値。次に、クライアント側で解析とプッシュを実行します。

例：私はもともと自分のPHPに次のようなものを送信させようとしていました

[{"name":"Name 1","data":["[Date.UTC(2011,11,08), 4 ]","[Date.UTC(2011,11,09), 4 ]","[Date.UTC(2011,11,10), 4 ]","[Date.UTC(2011,11,11), 4 ]","[Date.UTC(2011,11,14), 3 ]"]}

しかし、私が本当にする必要があったのは、次のようなものを送信することでした

[{"name":"Name 1","data":["2011,11,08, 4","2011,11,09,4"....`

最初のステップは、「series」オプションが空の配列に設定されていることを確認することですseries: []

（これが異なって行われた他の答えを見たので、私はこれに言及します）。

次に、getJSON関数で、プルするオブジェクトごとに新しいオブジェクトを作成する必要があります。これには、空の「data」配列も含まれます（以下の「varseries」を参照）。

次に、いくつかの$.eachループをネストして、データを解析して必要な配列にプッシュし、各オブジェクトの「名前」を入力します。

    $.getJSON('http://exmaple.com/getdata.php?ID=' + id, function(data) {           
        $.each(data, function(key,value) {
            var series = { data: []};
            $.each(value, function(key,val) {
                if (key == 'name') {
                    series.name = val;
                }
                else
                {
                    $.each(val, function(key,val) {
                        var d = val.split(",");
                        var x = Date.UTC(d[0],d[1],d[2]);
                        series.data.Push([x,d[3]]);
                    });
                }
            });
            options.series.Push(series);
        });

上記のコードの後で、チャートをインスタンス化する必要があります。

var chart = new Highcharts.Chart(options);

そしてそれはそれであるはずです！

うまくいけば、他の誰かがこの答えが有用であり、それを理解しようとして何日も頭を悩ませる必要がないことを発見します。 :-)

15
gtr1971

Javascript UTCメソッドは整数で返されるため、サーバーサイドでJSONを生成するときに、JSONで関数（UTC.Date）を渡そうとする代わりに、Unixタイムスタンプを整数として渡す方がよいでしょう。 JSON全体が無効です！

そう

これの代わりに

while ($item = mysql_fetch_assoc($result)) {            
    $name = $item['Item1'];
    $date = str_replace("-",",",$item['Item2']);
    $pos = $item['Item3'];

    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],");
    echo json_encode($arr);         
}

これを行う：

while ($item = mysql_fetch_assoc($result)) {            
    $name = $item['Item1'];
    $unix_date = date("Y-m-d", strtotime($item['Item2']));
    $pos = $item['Item3'];

    $arr = array("name"=>$name,"data"=>"[".($unix_date*1000).", ".$pos." ],");
    echo json_encode($arr);         
}

JS互換にするために、PHP unixタイムスタンプに1000を掛けていることに注意してください。

参照： http://www.w3schools.com/jsref/jsref_utc.asp

3
Tamas Kalman

Highchartsのサンプルコードで確認したところ、seriesはそれぞれ{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"}などを含むJSONオブジェクトの配列である必要があります。

主な問題は、ページ2からの出力であり、配列ではありません。

最初に$ .eachを修正する必要があります。次に、valueではなくdataをプッシュする必要があります。

$.each(data, function(key,value) {
    options.series.Push(value);
});

これにより、一連の各アイテムが完全なjsonオブジェクトに適切に設定されます。

次に、出力を修正するには：

$output = [];
while ($item = mysql_fetch_assoc($result)) {            
    $name = $item['Item1'];
    $date = str_replace("-",",",$item['Item2']);
    $pos = $item['Item3'];

    //I don't think there's supposed to be a comma after this square bracket
    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ]");
    array_Push($output, json_encode($arr));     
}

echo "[";
foreach($output as $val){
    echo $val;
    if($val != end($output)) echo ",";
}
echo "]";

そしてそれはそれをするべきです。

2
sicks

PHP5.5でチェックイン

これをデータ系列を使用してjsonに追加するだけです。

$date = '31-12-2015 00:00:00';
$datetimeUTC = (strtotime($date) * 1000);
$data[] = [$datetimeUTC, (float) $value];
0
Kunal Panchal

Mktime（）によって生成されたタイムスタンプを送信する問題に遭遇しました。これは、highchartsがUTC時刻を予期しているのに対し、PHPタイムスタンプはUTCではないためです。データがグラフの間違った日に表示される可能性があるため、タイムゾーンを考慮する必要があります。

function _convertToUTC($timeStamp) {
    return (int)$timeStamp + (int)date('Z', $timeStamp);
}

コード例は次のようになります。

$serie = array(
    'name' => 'title',
    'data' => array(
        // multiply timestamp by 1000 to get milliseconds
        array(_convertToUTC(mktime(0,0,0,1,1,2016)) * 1000, 15),
        array(_convertToUTC(mktime(0,0,0,2,1,2016)) * 1000, 18),
        array(_convertToUTC(mktime(0,0,0,3,1,2016)) * 1000, 13),
    ),
);
echo json_encode($serie);
0
Dimitri L.