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];
??????????? })()
??????? }]

轉載于:https://www.cnblogs.com/QiuJL/archive/2012/02/10/4524225.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/377764.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/377764.shtml
英文地址,請注明出處:http://en.pswp.cn/news/377764.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

可編程ic卡 通用嗎_8255可編程IC

可編程ic卡 通用嗎Introduction 介紹 An 8255 programmable integrated circuit (IC) is an IC used for interfacing the microprocessor with the peripheral devices. It is a 40 pin IC which was introduced by INTEL to use with its 8085 and 8086 microprocessors. 82…

POJ 1944 Fiber Communications (枚舉 + 并查集 OR 線段樹)

題意 在一個有N&#xff08;1 ≤ N ≤ 1,000&#xff09;個點環形圖上有P&#xff08;1 ≤ P ≤ 10,000&#xff09;對點需要連接。連接只能連接環上相鄰的點。問至少需要連接幾條邊。 思路 突破點在于最后的結果一定不是一個環&#xff01;所以我們枚舉斷邊&#xff0c;則對于…

九、邏輯回歸多分類和softmax多分類

一、邏輯回歸多分類 假設激活函數使用的是sigmoid函數 邏輯回歸多分類其實是多個二分類而已&#xff0c;若求三分類問題需要對訓練的數據樣本進行適當的修改調整即可&#xff0c;如何修改樣本數據可以參考邏輯回歸二分類和多分類本質區別&#xff0c;內容都一樣&#xff0c…

【C++grammar】繼承與構造test1代碼附錄

目錄1、main.cpp2、circle.cpp3、circle.h4、rectangle.cpp5、rectangle.h6、Shape.h1、main.cpp #include <iostream> #include <string> #include "Shape.h" #include "circle.h" #include "rectangle.h"//創建Shape/Circle/Rect…

hdu 4747 mex 線段樹+思維

http://acm.hdu.edu.cn/showproblem.php?pid4747 題意&#xff1a; 我們定義mex(l,r)表示一個序列a[l]....a[r]中沒有出現過得最小的非負整數&#xff0c; 然后我們給出一個長度為n的序列&#xff0c;求他所有的連續的子序列的mex(l,r)的和。 思路&#xff1a; 首先因為n的最大…

十、評估指標

我看過很多課程&#xff0c;不過內容都大差不差&#xff0c;也可以參考這篇模型評估方法 一、K折交叉驗證 一般情況&#xff0c;我們得到一份數據集&#xff0c;會分為兩類&#xff0c;一類是trainset訓練集&#xff0c;另一類十testset測試集。通俗一點也就是訓練集相當于平…

leetcode 47. 全排列 II 思考分析

題目 給定一個可包含重復數字的序列 nums &#xff0c;按任意順序 返回所有不重復的全排列。 思考分析以及代碼 這一題和前面的做過的兩個題目有所關聯&#xff1a; leetcode 46. 全排列 思考分析 再加上leetcode 491. 遞增子序列 思考分析類似的去重操作。 先畫出解空間樹…

python添加數組元素_在Python中向數組添加元素

python添加數組元素An array can be declared by using "array" module in Python. 可以通過在Python中使用“數組”模塊來聲明數組 。 Syntax to import "array" module: 導入“數組”模塊的語法&#xff1a; import array as array_alias_nameHere, im…

hdu 4472 Count(遞推即dp)

題目鏈接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid4472 代碼&#xff1a; #include <cstdio> #include <cstring> #include <iostream> #include <cmath> #include <algorithm> #include <queue> #include <vector> …

如何在Java中同步ArrayList?

同步ArrayList (Synchronizing ArrayList) In java, there are two ways to synchronize ArrayList, 在Java中&#xff0c;有兩種同步ArrayList的方法&#xff0c; With the help of synchronizedList() method 借助syncedList()方法 With the help of CopyOnWriteArrayList&l…

十一、決策樹和隨機森林

這門課和另一門課內容都差不多&#xff0c;可以參考七、決策樹算法和集成算法該篇博文。 一、決策樹相關概念 邏輯回歸本質 邏輯回歸&#xff1a;線性有監督分類模型。常用求解二分類問題&#xff0c;要么是A類別要么是B類別&#xff0c;一般會以0.5作為劃分閾值&#xff0c…

【C++grammar】繼承與構造

目錄1.繼承1、Inheritance (繼承)2、避免一個類被繼承&#xff08; C11 &#xff09;3、繼承實例4、完整代碼5、繼承的優缺點是什么?2.繼承中的構造函數1、 派生類繼承的成員2、調用基類構造函數3.繼承中的默認構造函數1、基類的無參構造函數2、由編譯器自動生成的基類構造函數…

C語言預處理

所謂預處理是指在進行編譯的第一遍掃描(詞法掃描和語法分析)之前所作的工作。預處理是&#xff23;語言的一個重要功能&#xff0c; 它由預處理程序負責完成。當對一個源文件進行編譯時&#xff0c; 系統將自動引用預處理程序對源程序中的預處理部分作處理&#xff0c; 處理完畢…

(轉)將cocos2dx項目從VS移植到Eclipse

本文轉自:http://www.cnblogs.com/Z-XML/p/3349518.html 引言&#xff1a;我們使用cocos2d-x引擎制作了一款飛行射擊游戲&#xff0c;其中創新性地融入了手勢識別功能。但是我們在移植過程中遇到了很多的問題&#xff0c;同時也發現網上的資料少而不全。所以在項目行將結束的時…

十二、聚類算法——相似度測量

兩套學習資料都類似&#xff0c;可參考聚類算法實戰 一、聚類 聚類&#xff1a;物以類聚&#xff0c;人以群分&#xff0c;是無監督學習中的一種。 沒有y&#xff0c;只有x&#xff0c;把不同的x根據相似度自動的聚成好多堆兒 本質上&#xff0c;N個樣本&#xff0c;映射到K個…

操作系統磁盤調度_磁盤調度| 操作系統

操作系統磁盤調度磁盤調度 (Disk Scheduling) One of the major duties of the operating is that, to use the hardware orderly and accurately. For disk drives, it has a duty of having a fast access time and disk bandwidth. Generally, bandwidth is the total numbe…

leetcode 344. 反轉字符串 541. 反轉字符串 II 雙指針解

目錄leetcode 344.反轉字符串1、題目2、思考leetcode 541. 反轉字符串 II1、題目2、思考leetcode 344.反轉字符串 1、題目 2、思考 典型的雙指針解法&#xff1a; 一個從前往后&#xff0c;一個從后往前&#xff0c;指針對應的交換即可。 class Solution { public:void reve…

關于銀聯在線支付和短彩信接口的開發——總結

9月份開始做用二維碼做閉環的一個在線訂購景區門票的項目&#xff0c;其中這樣做是很好的&#xff0c;用二維碼連接了線上與線下的交易和兌券。銀聯在線支付接口&#xff08;asp.net cs&#xff09;做的很好&#xff0c;方便調用開發。就是處理回值的時候得找個更好的方法才能顯…

十三、聚類算法

六、聚類算法實戰 一、聚類 聚類是一種無監督的機器學習任務&#xff0c;可以自動將數據劃分為類cluster&#xff0c;因此聚類分組不需要提前被告知所劃分的組應該是什么樣子的。因為我們甚至可能都不知道我們在尋找什么&#xff0c;所以聚類是用于知識發現而不是預測。 聚類…

pl/sql中的賦值運算符_如何在SQL中使用AND / OR運算符?

pl/sql中的賦值運算符Basically, AND / OR operator is used to retrieving the record from the database. If we give more than one conditions by using AND Operator, then it retrieves the data from the database when both the conditions are true. And if we use OR…