动态更新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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
js实现返回顶部效果
Mar 10 Javascript
详解a++和++a的区别
Aug 30 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
js观察者模式的弹幕案例
Nov 23 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 程序员应该使用的10个组件
2009/10/31 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
php 获取本地IP代码
2013/06/23 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
计算机相关的自我评价
2014/01/15 职场文书
结婚喜宴主持词
2014/03/14 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
大学迎新生标语
2014/10/06 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
python 安全地删除列表元素的方法
2022/03/16 Python