highcharts中series带参数的赋值问题
需要得到的代码如下：
series: [{name: '棒号1',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: '棒号2',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: '棒号3',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: '棒号4',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]}]
这边的data中的值全部都是数组，而我在后台处理过程中最多可以将每个数组中的数据用json传到js中，这样遇到一个问题，就是json传过去的数据为字符串类型而series中data需要的是数组。
参照了网上的很多例子（说句真的，网上的例子真的不多，而且几乎都是一样的），如：
//例子1
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="../js/themes/gray.js"></script>
-->
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="../js/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
/**
* Visualize an HTML table using Highcharts. The top (horizontal) header
* is used for series names, and the left (vertical) header is used
* for category names. This function is based on jQuery.
* @param {Object} table The reference to the HTML table to visualize
* @param {Object} options Highcharts options
*/
Highcharts.visualize = function(table, options) {
// the categories
options.xAxis.categories = [];
$('tbody th', table).each( function(i) {
options.xAxis.categories.push(this.innerHTML);
});
// the data series
options.series = [];
$('tr', table).each( function(i) {
var tr = this;
$('th, td', tr).each( function(j) {
if (j > 0) { // skip first column
if (i == 0) { // get the name and init the series
options.series[j - 1] = {
name: this.innerHTML,
data: []
};
} else { // add values
options.series[j - 1].data.push(parseFloat(this.innerHTML));
}
}
});
});
var chart = new Highcharts.Chart(options);
}
// On document ready, call visualize on the datatable.
$(document).ready(function() {
var table = document.getElementById('datatable'),
options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
xAxis: {
},
yAxis: {
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.y +' '+ this.x.toLowerCase();
}
}
};
Highcharts.visualize(table, options);
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>Pears</th>
<td>2</td>
<td>0</td>
</tr>
<tr>
<th>Plums</th>
<td>5</td>
<td>11</td>
</tr>
<tr>
<th>Bananas</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>Oranges</th>
<td>2</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
这个方法是先将需要读取的数据写在页面上，然后直接读取页面上的数据就可以了，但是不同项目的具体需求不净相同，我做的项目不可能在页面加载时就取到所需要的数据。没办法用了个最笨的办法，就是一个一个的赋值，这样效率是不咋地，还好每次只查询最多3条数据。
如果哪位大侠看到我这篇拙文，并且有更好的解决办法，还请赐教啊，本人不胜感激，QQ：848342187
附（我的解决代码）：
//js定义二维数组
var treeCol = new Array();
for (var i = 0; i < 15; i++) {
//二维数组赋值
treeCol[i] = new Array();
for (var j = 0; j < count; j++) {
treeCol[i][j] = 0;
}
}
series: [
//省略相同代码
{
name:'棒号2',
data: (function () {
return treeCol[1] == undefined ? 0 : treeCol[1];
})()
}, {
name:'棒号1',
data: (function () {
return treeCol[0] == undefined ? 0 : treeCol[0];
})()
}]
