动态更新highcharts数据的实现方法


Posted in Javascript onMay 28, 2016

动态更新highcharts数据的实现方法

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript">
    	  var chart ;
      $(function (){
        chart = new Highcharts.Chart({
        	chart: { 
            renderTo: 'container'
          },
          title: {
            text: '?',
          },
          xAxis: {
            categories: []
          },
          yAxis: {
            title: {
              text: '数据'
            },
          },
          series: []
        });
      });
      function show(){
      	var trs = $('table tr');
      	var datas=[];
      	var map={};
      	for(var i=1;i<trs.length;i++){
      		 var nams = $('td:first',trs[i]).html();
      		 var value = $('td:last',trs[i]).html();
      		 if(typeof map[nams]=='undefined'){
      		 	 var pos = datas.length;
      		 	 map[nams] = pos;
      		 	 datas[pos]={name:nams,data:[]};
      		 }
      		 datas[map[nams]]["data"].push(Number(value));
      	}
      	var series=chart.series; 
      	if(series.length > 0){
      	  series[0].remove(false); 
       }
       var d = datas[0];
       chart.addSeries(d);//设置数据,danielinbiti
       chart.setTitle({text:d.name});//设置标题 commend by danielinbiti
       chart.redraw();
      }
    </script>
    <script type="text/javascript">
      $(function () {
        new Highcharts.Chart({
        	 chart: { 
            renderTo: 'container2'
          },
          title: {
            text: '链球菌毒素O',
          },
          xAxis: {
            categories: []
          },
          yAxis: {

            title: {
              text: '数据'
            },
          },
          series: [{
            name: 'SBASO',
            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]
          }]
        });
      });
    </script>
  </head>
  <body>
  	 <input type='button' onclick='show()' value='显示表格数据'/>
    <h1>曲线图</h1>
    <!-- 第一个空图 -->
    <div id="container" style="width:300px;height:300px;float:left;"></div>
    <!-- 第二个有数据的图 -->
    <div id="container2" style="width:300px;height:300px;float:left;"></div>
    <table border="1" align="left">
      <tr>
        <td>CName</td>
        <td>EName</td>
        <td>Time</td>
        <td>Date</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>1</td>
        <td>7.0</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>2</td>
        <td>6.9</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>3</td>
        <td>9.5</td>        
      </tr>
    </table>
  </body>
</html>

以上这篇动态更新highcharts数据的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
Node.js模块加载详解
Aug 16 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
详解vue项目构建与实战
Jun 27 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
不同js异步函数同步的实现方法
May 28 #Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 #Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 #Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 #Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 #Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 #Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 #Javascript
You might like
安装APACHE
2007/01/15 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python求质数列表的例子
2019/11/24 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
国贸专业自荐信范文
2014/03/02 职场文书
父母对孩子说的话
2014/04/12 职场文书
学生党员公开承诺书
2014/05/28 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
思想品德评语大全
2014/12/31 职场文书
入党自传范文2015
2015/06/26 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android