通过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？

回答

相关问题