通過json獲得highcharts如何獲得xAxis？

我正在製作一個重量圖表。我通過JSON獲取圖表的數據，但問題是我沒有xAxis的數據，只有日期。下面是數據的一個例子，我得到：通過json獲得highcharts如何獲得xAxis？

[ 
    {"Date":"2011-03-02","y":"180"}, 
    {"Date":"2011-03-03","y":"250"}, 
    {"Date":"2011-03-09","y":"185"}, 
    {"Date":"2011-03-03","y":"300"} 
]

這裏是我得到的數據，並呈現圖表：

<script type="text/javascript"> 
    var chart; 

    function requestData() { 
     $.getJSON('<?php echo Dispatcher::baseUrl();?>/logs/feed_data', 
      function (data) { 
       var series = chart.series[0]; 
       series.setData(data); 
      } 
     ); 
    } 

    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'contain', 
       defaultSeriesType: 'line', 
       marginRight: 130, 
       marginBottom: 25, 
       events: { load: requestData } 
      }, 
      title: { 
       text: 'Your Weight History', 
       x: -20 //center 
      }, 
      subtitle: { 
       text: 'Source: Fitness', 
       x: -20 
      }, 
      xAxis: { 
       categories: [] 
      }, 
      yAxis: { 
       title: { 
       text: '-weight -Pounds ' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.series.name +'</b><br/>'+ 
       this.x +': '+ this.y +' -Pounds'; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -10, 
       y: 100, 
       borderWidth: 0 
      }, 
      series: [{ 
       name: 'Data1', 
       data: [] 
      }] 
     }); 
    }); 
</script>

來源

2011-03-03 cake bakerr

是否有你展示的任何示例 – Muhaimin 2012-03-30 03:45:25

你的json應該是一個數組。據我所知，有一個特定的時間和日期格式。在某個日期時間之後應該以毫秒爲單位。所以我建議讓你的json格式適合高層建築。 – SPandya 2013-12-17 06:34:43

不幸的是，你不能直接在X，Y繪製一個數據點以您指定的方式定位。當您打電話series.setData(data)，數據必須是在one of three forms：

y值的陣列（例如data = [0,1,2,3]）
形式[x, y]的陣列對象的陣列（例如[[0,0], [1,1], [2,2]]）
的Point objects陣列

做你想做的事，你要麼需要使用pointStart和pointInterval作爲系列plotOptions描述，鄰r將日期轉換爲整數（毫秒）並將x軸類型設置爲'datetime'。

來源

2011-03-07 17:19:53 NT3RP

這是一起@ NT3RP的答案的線條，但here是你如何能解析和對數據進行排序，使之適用於Highcharts一個例子：

function requestData() { 
    var chart = this; 
    $.getJSON('<?php echo Dispatcher::baseUrl();?>/logs/feed_data', 
      function (data) { 
       var series = chart.series[0]; 
       var procData = $.map(data, function(item){ 
        return [[Date.parse(item.Date), parseInt(item.y, 10)]];   
       }); 
       procData.sort(function(a, b){ 
        return a[0] - b[0];    
       }); 
       series.setData(procData); 
     }); 
} 

$(document).ready(function() { 
    new Highcharts.Chart({ 
     chart: { 
      renderTo: 'contain', 
      defaultSeriesType: 'line', 
      marginRight: 130, 
      marginBottom: 25, 
      events: { load: requestData } 
     }, 
     title: { 
      text: 'Your Weight History', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: Fitness', 
      x: -20 
     }, 
     xAxis: { 
      type: 'datetime' 
     }, 
     yAxis: { 
      title: { 
      text: '-weight -Pounds ' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>'+ this.series.name +'</b><br/>'+ 
      this.x +': '+ this.y +' -Pounds'; 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Data1', 
      data: [] 
     }] 
    }); 
});

您可能需要使用Highcharts.numberFormatter來格式化工具提示中的日期，但我沒有在jsfiddle中包含這些日期。

來源

2012-05-31 13:47:39

通過json獲得highcharts如何獲得xAxis？

回答

相關問題