<!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. Mysql5.7.9密码已过有效期的处理过程

    怎么知道系统默认的有效期是多久呢?使用一个普通用登陆[未过期]:默认系统的密码生命周期是360天就是一年这样了: test01@(none) 09:11:43>show variables li ...

  2. 4 cocos2dx 3.0 源码分析- scheduler

    scheduler 这个类, 负责了引擎的自定义更新, 及定时更新相关的操作, 看看下面的代码,很熟悉吧.   schedule(schedule_selector(HelloWorld::updat ...

  3. 一次WEB前端优化尝试

    今天对自己做的项目中的一个设计器界面加载速度上进行了优化,因为页面在加载的时候,感觉有点慢.首先,我用firefox的yslow和chrome的pagespeed进行了测试,效果如下,分数有点不同,但 ...

  4. C#-MessageBox全部函数重载形式及举例

    Form1.cs using System; using System.Collections.Generic; using System.ComponentModel; using System.D ...

  5. 【Linux】linux bash shell之变量替换：:=句法、=句法、:-句法、-句法、=?句法、?句法、:+句法、+句法

    linux bash shell之变量替换::=句法.=句法.:-句法.-句法.=?句法.?句法.:+句法.+句法   linux bash shell之变量替换::=句法.=句法.:-句法.-句法. ...

  6. Oracle日期周具体解释以及周開始结束时间计算

    1 ORACLE中周相关知识描写叙述 1.1           日期格式化函数 TO_CHAR(X [,FORMAT]):将X按FORMAT格式转换成字符串. X是一个日期,FORMAT是一个规定了 ...

  7. 函数y=sin(1/x)曲线

    该曲线在x趋近于零时振荡很剧烈,在远离零点时振荡越来越平缓. 图线: 代码: <!DOCTYPE html> <html lang="utf-8"> < ...

  8. C# int与string转化

    1.int-->string ; string s1 = a.ToString(); string s2 = Convert.ToString(a); 2.string -->int &q ...

  9. 算法笔记_146:TarJan算法的应用(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 Problem Description 为了训练小希的方向感,Gardon建立了一座大城堡,里面有N个房间(N<=10000)和M条通道(M& ...

  10. ssh 安装笔记

    debian 6.0 的一台32位机器,aptitude search openssh-server-x509 没结果(其他机同样源配置是有结果的),于是上内部源下载openssh-server-x5 ...