向jquery highcharts中插入数据失败
Insert data into jquery highcharts fail
我想把表格中的数据放到highcharts中。
表将首先加载,然后在body关闭之前的底部,我将抓取数据到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>
我想出了一个解决方案,并把它放在这里:http://jsfiddle.net/CAKQH/21189/
所以你必须理解的主要事情是,实际图表的系列"部分"是一个可以采取几种不同形式的对象数组。您可以在这里阅读更多内容:http://www.highcharts.com/ref/#series
所以我的方法和你在代码中描述的方法的最大区别是,在实际创建图表之前,我先为highcharts准备了数据。
var piechartinfo = {
type: 'pie',
name: 'Custom Info',
data: []
}
我让数据数组为空,因为你的jquery循环之后会填充它。
//chart.series[0].data.push([charttextvalue, chartnumbervalue]);
piechartinfo.data.push([charttextvalue, chartnumbervalue]);
然后,当实际的图表被实例化时,我添加piechartinfo对象
series: [piechartinfo]
相关文章:
- 一台特定计算机的Ajax请求数据未定义/失败
- ListView的ItemTemplate内的自定义HtmlControl的数据绑定失败
- 当数据大小超过1119字节时,jqueryajax调用失败
- 二进制数据的createObjectUrl失败
- ExtJs 4 GridPanel with CellEdit:输入的数据在验证失败时丢失
- AngularJS中共享数据服务初始化失败
- Powerbuilder/Javascript HTML数据窗口SetItem日期时间失败
- 为什么 AJAX 在部分数据序列化方面失败
- Javascript发布到php,但检索数据失败
- 无法设置 CKEditor 值;设置数据失败
- 画布到数据网址的跨源访问失败
- php&ajax检索post数据失败
- jQuery检索数据失败
- METEOR:从外部api存储数据失败
- BLE iOS Nativescript:广播数据失败
- 向jquery highcharts中插入数据失败
- Flask无限滚动加载数据失败
- 日志含义修改对象名称,读取JSON数据失败
- 从PHP文件中获取数据失败
- 解析 json 数据失败 - jquery