动态更新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 构造函数 面相对象学习必备知识
Jun 09 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
初探PHP5
2006/10/09 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
jQuery中size()方法用法实例
2014/12/27 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Python实现随机漫步功能
2018/07/09 Python
Django中的AutoField字段使用
2020/05/18 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
python IP地址转整数
2020/11/20 Python
adidas美国官网:adidas US
2016/09/21 全球购物
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
一道输出判断型Java面试题
2014/10/01 面试题
函授自我鉴定
2013/11/06 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
公司委托书格式范文
2014/04/04 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB