<!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. redis主键失效机制

    Memcached删除主键的方式与Redis有何异同 首先,Memcached 在删除失效主键时也是采用的消极方法,即 Memcached 内部也不会监视主键是否失效,而是在通过 Get 访问主键时才 ...

  2. linux、mac的bash和zsh如何切换

    1.hostname 192-23-2-2 修改主机名字 2.chsh -s /bin/bash和chsh -s /bin/zsh可以永久切换,也就是一登录进来的就是相应的界面 bash/zsh命令是 ...

  3. Single Number and Single Number II

    [] Given an array of integers, every element appears twice except for one. Find that single one. [] ...

  4. sqlmap使用帮助文档(1)

    当给sqlmap这么一个url的时候,它会: 1.判断可注入的参数 2.判断可以用那种SQL注入技术来注入 3.识别出哪种数据库 4.根据用户选择,读取哪些数据 sqlmap支持五种不同的注入模式: ...

  5. Android之旅 自我图示总结四大组件

    最近学完了Android的四大组件的基础知识,自己总结了一个图示,希望自己看到这个图的时候能回忆起相关的知识点,与大家分享!

  6. 使用dulilib DirectUI库(一)

    1.在创建的窗口类里面 需要继承CWindowWnd.INotifyUI 对于CWindowWnd里面的方法: 实现;,重载virtualUINTGetClassStyle()const;返回窗口的风 ...

  7. Android安装包相关知识汇总 (编译过程图给力)

    转自: https://mp.weixin.qq.com/s?__biz=MzAwNDY1ODY2OQ==&mid=208008519&idx=1&sn=278b7793699 ...

  8. Python网络爬虫 - 一个简单的爬虫例子

    下面我们创建一个真正的爬虫例子 爬取我的博客园个人主页首页的推荐文章列表和地址 scrape_home_articles.py from urllib.request import urlopen f ...

  9. Python中的作用域

    Python中的作用域 Python 中,一个变量的作用域总是由在代码中被赋值的地方所决定的. 当 Python 遇到一个变量的话他会按照这样的顺序进行搜索: 本地作用域(Local)→当前作用域被嵌 ...

  10. 使用System.getProperty方法，如何配置JVM系统属性 （转载）

    很多时候需要在项目中读取外部属性文件,用到了System.getProperty("")方法.这个方法需要配置JVM系统属性,那么如何配置呢? 那就是使用java -D 配置系统属 ...