2012-04-13 113 views
0

UPDTAED:现在用下面的代码中,JSON是正确解析,highcharts正确的JSON输入

但这些列未在初始加载显示,如果我把光标放在我可以看到工具提示显示系列名称和价值。但是,如果我重新调整浏览器窗口大小的列出现。我尝试添加chart.redraw();在updatedChart()之后;但它dosent帮助我的div如下

<div id="container" style="min-width: 400px ; height: 650; margin:0 auto"></div> 

任何想法请吗?此外,我不能再产生上的jsfiddle这个问题,并已经测试了这个在Safari,Chrome和Firefox(均表现出这种奇怪的行为)

  var chart; 
      options = { 
       chart: { 
        renderTo: 'container', 
        type: 'column', 
       }, 
       title: { 
        text: 'Some title' 
       }, 
       subtitle: { 
        text: 'subtitle' 
       }, 
       xAxis: { 
        categories: [], 
        title: { 
         text: null 
        } 
       }, 
       yAxis: { 
        min: 0, 
        title: { 
         text: 'y-Axis', 
         align: 'high' 
        } 
       }, 
       tooltip: { 
        formatter: function() { 
         return '' + this.series.name + ': ' + this.y + ' '; 
        } 
       }, 
       plotOptions: { 
        bar: { 
         dataLabels: { 
          enabled: true 
         } 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'right', 
        verticalAlign: 'top', 
        x: -100, 
        y: 100, 
        floating: true, 
        borderWidth: 1, 
        backgroundColor: '#FFFFFF', 
        shadow: true 
       }, 
       credits: { 
        enabled: false 
       }, 
       series: 
       [] 
      }; 
      $(document).ready(function() { 
       chart= new Highcharts.Chart(options) 
       console.log("calling update chart");  
       updateChart(); 
      }); 

      function updateChart() { 
       $.ajax({ 
        type: "GET", 
        url: "test.json", 
        async: false, 
        dataType: "json", 
        success: function(data){ 
         console.log(data); 


         var i=0; 
         $.each(data,function(index,item){ 
          console.log(data.Chart1[index]); 
          console.log("i value is "+i); 
          chart.addSeries(data.Chart1[index]); 
          i++; 
         }); 

        } 
       }); 
      } 
      } 

的json输入文件低于

  [ 
         { 
          name: 'name1', 
          y: [32.6,16.6,1.5] 
         }, { 
          name: 'name2', 
          y: [6.7,0.2,0.6] 
         }, { 
          name: 'name3', 
          y: [1,3.7,0.7] 
         }, { 
          name: 'name4', 
          y: [20.3,8.8,9.5] 
         },{ 
          name: 'name5', 
          y: [21.5,10,7.2] 
         }, { 
          name: 'name6', 
          y: [1.4,1.8,3.7] 
         }, { 
          name: 'name7', 
          y: [8.1,0,0] 
         }, { 
          name: 'name8', 
          y: [28.9,8.9,6.6] 
         } 
        ] 
+0

问题出在图表firstface上,对不对? – 2012-04-13 04:37:50

+0

@Ricardo正确。我没有看到线条,列。标题和subtile出现,所以我想我的JSON数据发送到图表是不正确的 – Linus 2012-04-13 04:39:10

+0

不,这是正确的。问题是,当图表没有被渲染时,你正在使用setData。我现在就把我的答案,请分钟:) – 2012-04-13 04:41:58

回答

4

编辑:

var chart = null, 
    options = { 
     chart: { 
      renderTo: 'container', 
      type: 'column' 
     }, 
     title: { 
      text: 'Some title' 
     }, 
     subtitle: { 
      text: 'subtitle' 
     }, 
     xAxis: { 
      categories: [], 
      title: { 
       text: null 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'y-Axis', 
       align: 'high' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '' + this.series.name + ': ' + this.y + ' '; 
      } 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -100, 
      y: 100, 
      floating: true, 
      borderWidth: 1, 
      backgroundColor: '#FFFFFF', 
      shadow: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [] 
    }; 
$(document).ready(function() { 
    updateChart(); 
}); 

function updateChart() { 
    $.getJSON('test.json', function(data) { 

     // check if the chart's already rendered 
     if (!chart) { 
      // if it's not rendered you have to update your options 
      options.series = data; 
      chart = new Highcharts.Chart(options); 
     } else { 
      // if it's rendered you have to update dinamically 
      jQuery.each(data, function(seriePos, serie) { 
       chart.series[seriePos].setData(serie, false); 
      }); 
      chart.redraw(); 
     } 
    }); 
} 

小提琴:LINK