<!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数据的更多相关文章

  1. highcharts图表组件入门教程：如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  2. EF中数据修改时动态更新其他数据

    场景 利用.net core开发时,经常会遇到使用EF(Entity Framework),但是今天在开发过程中发现一个值莫名其妙的自己变了,我怀疑是EF的问题. 主要代码如下: 1 // 最近一条告 ...

  3. Android零基础入门第44节：ListView数据动态更新

    原文:Android零基础入门第44节:ListView数据动态更新 经过前面几期的学习,关于ListView的一些基本用法大概学的差不多了,但是你可能发现了,所有ListView里面要填充的数据都是 ...

  4. Android ListView动态更新数据

    ListView就是可以显示一行行Item的控件,有时候数据非常多,通常需要分页显示,但为了减少用户的输入,我们可以动态更新ListView,把下一页要显示的数据的添加到当前ListView中. 先看 ...

  5. WPF柱状图（支持数据库动态更新）之组件的数据动态化

    WPF柱状图(支持数据库动态更新) 在这片文章中我们介绍了如何将柱状图包装成一个组件,将这个组件的属性对外开放和组件的外部属性根内部属性绑定以及非轮询动态更新数据的方式. 非轮询更新数据感觉介绍的不够 ...

  6. echarts动态加载数据无法更新series 无法更新图表

    最近遇到一个Echarts图表无法动态更新数据的问题 最初我在option中设置series的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...

  7. highChart数据动态更新

    highChart官网上通过ajax加载数据的例子 上面是第一次生成图表的时候使用 我想动态更新,在已经生成的图表上动态更新 chartBS.series[0].setData(sugarListDa ...

  8. postgresql 存储过程动态更新数据

    -- 目标:动态更新表中数据 -- 老规矩上代码-----------------------------tablename 表名--feildname 字段名数组--feildvalue 字段值数组 ...

  9. Android零基础入门第67节：RecyclerView数据动态更新

    列表的数据往往会跟随业务逻辑不断刷新,所呈现出来的数据需要动态更新,那么RecyclerView是如何动态更新数据的呢? 之前在学习ListView的时候如果数据改变,需要调用notifyDataSe ...

随机推荐

  1. Log4j写入数据库详解

    log4j是一个优秀的开源日志记录项目,我们不仅可以对输出的日志的格式自定义,还可以自己定义日志输出的目的地,比如:屏幕,文本文件,数据库,甚至能通过socket输出.本节主要讲述如何将日志信息输入到 ...

  2. OpenShift和F5的集成手册

    OpenShift和F5的集成步骤,记录如下,如实际操作中有变更会再度编辑修改. 1.整体架构 使用BIG-IP作为Openshift的Router,能实现以下功能: 为Services创建BIG-I ...

  3. Django 版本对应的 Python 版本

    Django 版本对应的 Python 版本: Django 版本 Python 版本 1.8 2.7, 3.2 , 3.3, 3.4, 3.5 1.9, 1.10 2.7, 3.4, 3.5 1.1 ...

  4. nmap常用扫描命令

    NMap,也就是Network Mapper,是Linux下的网络扫描和嗅探工具包. nmap是在网络安全渗透测试中经常会用到的强大的扫描器.功能之强大,不言而喻.下面介绍一下它的几种扫描命令.具体的 ...

  5. go语言基础之普通函数的调用流程

    函数调用流程:先调用后返回,先进后出,函数递归,函数调用自己本分,利用此物点 1.普通函数的调用流程 package main //必须 import "fmt" func fun ...

  6. GSM模块_STM32实现GPRS与服务器数据传输经验总结

    硬件环境 MCU:STM32F103RET6 (调试器:J-Link) GSM模块:Ai-Thinker_A6 (安信可)(还需要配一个串口打印工具,当初选这个模块纯粹是因为价格是最便宜的) ---- ...

  7. 【云计算】Docker 镜像如何设置语言环境？bash: warning: setlocale: LC_ALL: cannot change locale (en_US)

    解决方案: # set default language environment RUN locale-gen en_US.UTF- \ && dpkg-reconfigure loc ...

  8. Tapable 0.2.8 入门

    [原文:Tapable 0.2.8 入门] tapable是webpack的核心框架(4.0以上版本的API已经发生了变化),是一个基于事件流的框架,或者叫做发布订阅模式,或观察者模式,webpack ...

  9. （剑指Offer）面试题55：字符流中第一个不重复的字符

    题目: 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g".当从该字符流中读出前 ...

  10. Cocos2d-x -- 如何让背景从上到下滚动

    1. 首先,声明一个2个大小的sprite数组 class GameScreen : public cocos2d::Layer { public: ... cocos2d::Sprite *back ...