插入数据到jquery highcharts失败

我想将表中的数据放入highcharts的饼图。插入数据到jquery highcharts失败

表格将首先加载，然后在关闭之前的底部，我将抓取数据到highcharts中进行显示。

我试过了，但只是不工作，什么问题关系到语法。我相信

<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 

<script type="text/javascript" src="../../includes/js/highcharts/highcharts.js"></script>  
<script type="text/javascript" src="../../includes/js/highcharts/modules/exporting.js"></script>  
</head> 

<body> 

bla bla bla 

bla bla bla 

bla bla bla 


<table class="dataTbl"> 
<tbody> 
<tr><td>fruit</td><td>qty</td></tr> 
<tr><td>apple</td><td>1</td></tr> 
<tr><td>banana</td><td>5</td></tr> 
<tr><td>durian</td><td>3</td></tr> 
</tbody> 
</table> 

//to load pie chart at the last, data obtain from table 

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


<script type="text/javascript"> 


var chart; 

$(document).ready(function() { 


     chart = new Highcharts.Chart({ 
       chart: { 
         renderTo: 'container', 
         plotBackgroundColor: null, 
         plotBorderWidth: null, 
         plotShadow: false 
       }, 
       title: { 
         text: 'Top fruits' 
       }, 
       tooltip: { 
         formatter: function() { 
           return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
         } 
       }, 
       plotOptions: { 
         pie: { 
           allowPointSelect: true, 
           cursor: 'pointer', 
           dataLabels: { 
             enabled: true, 
             color: '#000000', 
             connectorColor: '#000000', 
             formatter: function() { 
               return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
             } 
           } 
         } 
       }, 

       series: [{ 
          type: 'pie', 
          name: 'Browser share', 
          data: [ 
            ['Firefox', 45.0], 
            ['IE',  26.8], 
            ['Chrome', 12.8], 
            ['Safari', 8.5], 
            ['Opera',  6.2], 
            ['Others', 0.7] 
          ] 
        }] 

       //default series data sample given by highchart, how to override this? 

     }); 



     $(".dataTbl > tbody > tr").each(function (index) { 
      if (index != 0) { 
       var chartnumbervalue = parseInt($(this).find("td:first").next('td').text()); 
       var charttextvalue = jQuery.trim($(this).find("td:first").text()); 

       //chart.series[0].data.push([charttextvalue, chartnumbervalue]); 

       //i want to push the data into series: data: but fail... 
      } 
     }); 



}); 

</script> 

</body>

来源

2011-10-24 i need help

我想出了一个解决方案，并把它放在这里的jsfiddle：http://jsfiddle.net/CAKQH/21189/

所以主你必须明白的是，实际图表的系列'部分'是一组可以采用几种不同形式的对象。你可以在这里阅读更多关于这方面的信息：http://www.highcharts.com/ref/#series

所以，我的方法和你在代码中描述的方法有很大的不同之处，那就是我在实际创建图表之前先准备好了高层图的数据。

var piechartinfo = { 
          type: 'pie', 
          name: 'Custom Info', 
          data: [] 
        }

我离开数据数组为空，因为你的jquery循环后来会填满它。

  //chart.series[0].data.push([charttextvalue, chartnumbervalue]); 

      piechartinfo.data.push([charttextvalue, chartnumbervalue]);

那么实际图表被实例化时，我添加在piechartinfo对象

series: [piechartinfo]

来源

2011-10-24 15:18:22 Robodude

插入数据到jquery highcharts失败

回答

相关问题