<!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. webbrowser 常用方法（C#）

    0.常用方法   Navigate(string urlString):浏览urlString表示的网址 Navigate(System.Uri url):浏览url表示的网址 Navigate(st ...

  2. JavaScript 中 Object ，Prototype 相关的属性和方法

    span { font-family: 'Consolas'; font-size: 10pt; color: #ffffff; } .sc0 { } .sc2 { color: #c0c0c0; } ...

  3. Meanshift，聚类算法(转)

    原帖地址:http://www.cnblogs.com/liqizhou/archive/2012/05/12/2497220.html   记得刚读研究生的时候,学习的第一个算法就是meanshif ...

  4. Pycharm 2018 激活 亲测有效

    下载  https://share.weiyun.com/5NVc5U3  并将 JetbrainsCrack-3.1-release-enc.jar 放置到 pycharm安装目录的\bin目录下( ...

  5. apache环境 php开启intl扩展

    将php目录下的icu开头的所有dll文件copy到apache/bin目录 再开启 extension=php_intl.dll 扩展,重启apache.

  6. 【pyhon】怨灵侍全本漫画批量下载爬虫1.00

    代码: # 怨灵侍全本漫画批量下载爬虫1.00 # 拜CARTOON.fydupiwu.com整理有序所赐,寻找图片只要观察出规律即可,不用费劲下一页的找了 import time import ur ...

  7. （剑指Offer）面试题58：二叉树的下一个结点

    题目: 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 思路: 考虑中序遍历的过程, 如果当前结点存在右子节点, ...

  8. centos版本7以上网卡名修改

    1.初始状态网卡 2.首先,先编辑网卡的配置文件 vi /etc/sysconfig/network-scripts/ifcfg-eno16777736 将里面的NAME项修改为eth0 3.然后,禁 ...

  9. 无需编码开发快速设计互动式UI - uilang

    uilang是一个非常小巧的ui类库,可以帮助不熟悉前端代码的web设计人员快速的开发互动式UI.你只需要使用“语义式”的说明来控制元素的动态效果. 开发中你只需要在<code>标签内部输 ...

  10. android KK版本号收到短信后，点亮屏的操作

    alps/packages/apps/mms/src/comandroid\mms\transation\MessagingNotification.java private static void ...