动态更新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 ie6兼容position:fixed实现思路
Apr 01 Javascript
基于datagrid框架的查询
Apr 08 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JsRender for object语法简介
Oct 31 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
Ant Design的Table组件去除
Oct 24 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
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现多进程共享数据的方法分析
2017/12/04 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python科学计算之narray对象用法
2019/11/25 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
国家助学金获奖感言
2014/01/31 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
党员读书活动心得体会
2016/01/14 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
微信小程序调用python模型
2022/04/21 Python