动态更新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 相关文章推荐
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
js 金额文本框实现代码
Feb 14 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
js实现微信聊天效果
Aug 09 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
我的php学习笔记(毕业设计)
2012/02/21 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
jQuery事件详解
2017/02/23 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python实现停车管理系统
2018/11/30 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python__name__原理及用法详解
2019/11/02 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
Ref与out有什么不同
2012/11/24 面试题
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
2015年母亲节活动策划方案
2015/05/04 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书