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.mzph.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…