需要得到的代碼如下:
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];
??????????? })()
??????? }]