2012-02-23 16 views
1

私は新しいプロジェクトに取り組んでおり、のチャート作成にハイチャートを使用しています。ハイチャート - ロードjsonデータ

[{"date": "2012-02-23", "number": 2}, {"date": "2012-02-21", "number": 4] 

どのように私はHighcharts->Chart->Series->Dataにこのデータを追加することができます:私は、データベースから、いくつかのデータをJSONファイルを作成しましたか?

+0

実際には、グラフに描画する内容によって異なります。 –

答えて

1

下記のコードを検索してください。 JSONに存在するデータの縦棒グラフが表示されます。

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    jQuery(document).ready(function(){ 
      var data=[{"date": "2012-02-23", "number": 2}, {"date": "2012-02-21", "number": 4}]; 
      var chart = new Highcharts.Chart(
       { 
       chart:{ 
        renderTo: "container", // the div id where you want to dispaly the chart 
        type: 'column',  // type of chart as colum chart, it can be anything-'bar','pie','column' etc. 
        height: 300 
       }, 
       title: { 
        text: "Numbers on two different dates" 
       }, 
       xAxis: { 
        categories: [data[0]["date"],data[1]["date"]] 
       }, 
       yAxis: { 
        title: { 
         text: 'Numbers on date' 
        } 
       }, 
       series: [{name:"numbers",data:[data[0]["number"],data[1]["number"]]}] 
      } 
     );   
    }); 
    </script> 
    </head> 
    <body> 
    <div id="container"> 
    </div> 
    </body> 
    </html> 
+0

なぜxAxis上のカテゴリで、 'datetime'型ではないxAxisですか?また、2つ以上の値の場合、このソリューションはうまく拡張されません。 – dgw

+0

@dgw、グラフに何をどのように表示したいか教えてください。また、 "2つ以上の値に対してAnd"の​​JSONデータを提供する –

関連する問題