2016-04-26 8 views
1

として解釈される日付私は少しこのように、不規則なx軸とhighchartを作成しようとしている:私はPHPおよび処理を経てMySQLからの私のデータを引っ張ってるhttp://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-irregular-time/Highcharts日に拾っていない - 文字列

JSON形式で

ハイチャート/ JSで日付を日付形式で読むことができません。文字列として引き出しているようです。ここで

は私のスクリプトです:

$(document).ready(function() { 
    var options = { 
     chart: { 
      type: 'spline', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     title: { 
      text: 'some title', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: '', 
      x: -20 
     }, 
     xAxis: { 
      type: 'datetime', 
      dateTimeLabelFormats: { // don't display the dummy year 
       month: '%e. %b', 
       year: '%b' 
      }, 
      categories: [] 
     }, 
     yAxis: { 
      title: { 
       text: 'L/min' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     plotOptions: { 
      spline: { 
       marker: { 
        enabled: true 
       } 
      } 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.series.name +': '+ 
       this.y +'</b><br>'+ this.x; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [] 
    } 

     $.getJSON("allreports/report.php", function(json) { 

     options.xAxis.categories = json[0]['data']; 
     options.series[0] = json[1]; 
     options.chart.renderTo = 'container'; 
     chart = new Highcharts.Chart(options); 
    }); 

とここに私のPHPページがあります:

<?php 
    $con = mysql_connect("localhost","db-user","db-pw"); 

    if (!$con) { 
     die('Could not connect: ' . mysql_error()); 
    } 

    mysql_select_db("db", $con); 

    $sth = mysql_query("SELECT v1,v2 FROM table"); 
    $rows = array(); 
    $rows['name'] = 'v1'; 
    while($r = mysql_fetch_array($sth)) { 
     $rows['data'][] = $r['v1']; 
    } 

    $result = array(); 
    array_push($result,$rows1); 
    array_push($result,$rows); 


    print json_encode($result, JSON_NUMERIC_CHECK); 


    mysql_close($con); 
?> 

これは以下を出力します

[{"name":"medicinetime","data":["01,01,1970,01,00,00","01,01,1970,01,33,36","01,01,1970,01,33,36","01,01,1970,01,33,36"]},{"name":"units","data":[1,3,2,2]}] 

しかし、次のように私のチャートは次のとおりです。

output

私が間違っていることについて考えてみてください。 PHP/JSが文字列ではなく一連のdatetimesとしてこの配列を拾うためには、私は何をする必要がありますか?

ありがとうございました!

+0

datetime型の軸を使用する場合は、カテゴリを設定できません。 @S McCrohanの答えにはさらなる手がかりがある –

答えて

2

あなたには2つの問題があります。まず、日付コンポーネントの値を実際のJavascriptの日付オブジェクトに変換する必要があります。シリーズデータを探しているフォーマットは、X/Yペアの配列です。それはあなたのデータを使用して、次のようになります:

[ 
    [Date.UTC(1970,1,1,1,0,0),1], 
    [Date.UTC(1970,1,1,1,33,36),3], 
    [Date.UTC(1970,1,1,1,33,36),2], 
    [Date.UTC(1970,1,1,1,33,26),2] 
] 

このような何か試してみてください:系列データの有効なフォーマットの

var xVals= json[0].data.map(item => { 
    var dateArr = point[0].join(','); 
    return Date.UTC(dateArr[2],dateArr[1],dateArr[0],dateArr[3],dateArr[4],dateArr[5]); 
}); 

var yVals = json[1].data; 

options.series[0] = { 
    name: json[1].name, 
    data: xVals.map((x,i) => [x,yVals[i]]) 
} 

一部のマニュアルはこちらです:http://www.highcharts.com/docs/chart-concepts/series

第二に、あなたはいくつかの重複したX値があり、それは混乱するでしょう...あなたはあなたのタイムスタンプをユニークにすることを望んでいるでしょう、あるいはそれらから線グラフを作るのは難しいでしょう。

関連する問題