将数据插入 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>
I would like to put data from table into highcharts piechart.
The table will be loaded first, then at the bottom before body closing, I will grab data into highcharts to display.
I tried, but just not working, something wrong related to syntax i believe...
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我想出了一个解决方案并将其放在 jsfiddle 上： http://jsfiddle.net/CAKQH/21189/< /a>
因此，您必须了解的主要事情是，实际图表的系列“部分”是可以采用几种不同形式的对象数组。您可以在这里阅读更多相关信息：http://www.highcharts.com/ref/#series
因此，我的方法与您在代码中描述的方法的最大区别在于，我在实际创建图表之前为高图表准备了数据。
我将数据数组留空，因为您的 jquery 循环随后将填满它。
然后，当实例化实际图表时，我添加了 piechartinfo 对象
I came up with a solution and put it on jsfiddle here: http://jsfiddle.net/CAKQH/21189/
So the main thing you have to understand is that the series 'section' of the actual chart is an array of objects that can take on a few different forms. You can read more about that here: http://www.highcharts.com/ref/#series
So the big difference with my approach and the one you described in your code is that I went ahead and prepared the data for the highcharts before actually creating the chart.
I left the data array empty because your jquery loop will fill it up afterwards.
Then when the actual chart is being instantiated, I add in the piechartinfo object