2013-06-23 71 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