2013-06-23 70 views
0

我試圖從Highcharts得到一個線條圖。我的JSON看起來像Highcharts線條圖,從JSON填充xAxis

[{"Monat":"April","d07geb":1.5},{"Monat":"June","d07geb":0.5},{"Monat":"March","d07geb":0.5},{"Monat":"May","d07geb":0.2}] 

Monat意味着月,我試圖得到的xAxis價值。 d07geb是該特定月份的金額。

該線條繪製完美,並且高圖似乎是正確的。但是,而不是一個月,xAxis有數字值。從1月開始,下一個入口是00:00:00.001。

我對此很新穎。我設法使用餅圖和柱形圖。但是這個驅使我堅果

$(function() { 
    var chart; 
    var myJson = 
[{"Monat":"April","d07geb":1.5},{"Monat":"June","d07geb":0.5},{"Monat":"March","d07geb":0.5},{"Monat":"May","d07geb":0.2}] 
    $(document).ready(function() { 

     var options = { 
     chart: { 
       renderTo: 'container', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      title: { 
       text: 'Money per Month' 
      }, 
      xAxis: { 
      type: 'datetime'}, 
      tooltip: { 
    formatter: function() { 
     return '<b>'+ this.point.name; 
    } 
    }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: true, 
         color: '#000000', 
         connectorColor: '#000000', 
         formatter: function() { 
          return '<b>'+ this.point.name; 
         } 
        } 
       } 
      }, 
      series: [] 

    }; 

     var seriesNew = { 
       type: 'line', 
       name: 'value', 
       data: [] 
      }; 



     jQuery.each(myJson, function (itemNo, item) { 
      seriesNew.data.push([ 
       item.Monat, 
       item.d07geb 
      ]) 
     }); 

     options.series.push(seriesNew);  
     chart = new Highcharts.Chart(options); 

    }); 

}); 

回答

0

如果你的X軸設置爲datetime,那麼你的JSON需要JS時間戳(Unixtime * 1000)。我建議你使用類別爲X軸:

xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

那麼你也必須改變你的JSON提供分類1- 12月12個值。

0

你不能分開你的X軸標籤和你的數據值嗎?

如果這是一個選項,你可以這樣做:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

 xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }, { 
      name: 'Berlin', 
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
     }, { 
      name: 'London', 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
     }] 
+0

推動我堅果的部分是,在phpmyadmin中,您可以使用higchart直接顯示查詢。它的作用就像一個魅力。但我無法從中解脫出來。 – user2476011