<!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. myeclipse8.6首次运行maven项目的问题解决

    myeclipse8.6导入maven项目后识别为普通java项目,即项目图标上没有小M的标识.这时是无法直接运行的. 解决方法:1,打开Window --> perferences,找到mye ...

  2. POJ 2046 Gap 搜索- 状态压缩

    题目地址: http://poj.org/problem?id=2046 一道搜索状态压缩的题目,关键是怎样hash. AC代码: #include <iostream> #include ...

  3. python with和上下文管理工具

    对于系统资源如文件.数据库连接.socket 而言,应用程序打开这些资源并执行完业务逻辑之后,必须做的一件事就是要关闭(断开)该资源. 比如 Python 程序打开一个文件,往文件中写内容,写完之后, ...

  4. 论#include

    1.#include " "与#include <> #include " "表示预编译命令源程序在当前项目下寻找头文件,如果找不到,再到标准头文件 ...

  5. Netbeans配合xdebug调试

    http://xdebug.org/download.php 下载对应的xdebug的dll不知道php文件中的ext文件夹中 并且加入以下配置在php.info 然后重启apche zend_ext ...

  6. Python Web Scraper - Simple Url Request

    from urllib.request import urlopen html = urlopen("http://www.baidu.com") print(html.read( ...

  7. javaWeb注册，登陆，注销功能的实现

    一:注册页面:regist.jsp: <%@ page language="java" contentType="text/html; charset=UTF-8& ...

  8. Makefile自动编写工具实例

    准备源文件如下: /*test.c*/ #include <stdio.h>#include "phello.h"#include "pword.h" ...

  9. 转：不在同一个服务器上的数据库之间的数据操作（oracle/sql server的对比）

    如何操做不在同一个数据库中的数据操作: 一.对于SQL server来讲:  1.采用创建链接服务器的方式:    (1).创建链接服务器       exec sp_addlinkedserver  ...

  10. Wait--使用sys.dm_io_virtual_file_stats来查看IO延迟

    /*============================================================================ File: VirtualFileStat ...