<!doctype html>

<html lang="en">

    <head>

        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

        <script type="text/javascript" src="js/highcharts.js"></script>

        <script type="text/javascript" src="js/jquery.highchartTable.js"></script>

        <script>

            $(function () {

                $('table.highchart').highchartTable();

                $("button.btnChart").click(function(){

                    var type = $(this).html();

                    showShape(type);

                });

                function showShape(type){

                $('table.highchart').attr("data-graph-type",type);

                //$('table.highchart').attr("data-graph-container",".container");

                $('table.highchart').bind('highchartTable.beforeRender',function(event,config){

                    var series = config.series;

                    for(var i = 0,len = series.length;i < len;i ++){

                        series[i].type = type;

                    }

                }).highchartTable();

            }

            });

        </script>

        <style type="text/css">

        table th,table td{

            line-height:18px;

            text-align:left;

            padding:8px;

            border-top:1px solid #dddddd;

        }

        </style>

    </head>

    <body>

        <div class="container1">

            <div>

                <button class="btnChart">line</button>

                <button class="btnChart">spline</button>

                <button class="btnChart">pie</button>

                <button class="btnChart">area</button>

                <button class="btnChart">column</button>

                <button class="btnChart">areaspline</button>

                <button class="btnChart">bar</button>

                <button class="btnChart">scatter</button>

            </div>

            <table class="highchart" data-graph-container=".container" data-graph-type="line">

                <thead>

                    <tr>

                        <th>Month</th>

                        <th>Sales</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>January</td>

                        <td>8000</td>

                    </tr>

                    <tr>

                        <td>February</td>

                        <td>18000</td>

                    </tr>

                    <tr>

                        <td>March</td>

                        <td>18000</td>

                    </tr>

                    <tr>

                        <td>April</td>

                        <td>2000</td>

                    </tr>

                    <tr>

                        <td>May</td>

                        <td>500</td>

                    </tr>

                </tbody>

            </table>

            <div class="container"></div>

        </div>

    </body>

</html>

highChartTable 切换的更多相关文章

  1. 最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目

    最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目 最近一个来自重庆的客户找到走起君,客户的业务是做移动互联网支付,是微信支付收单渠道合作伙伴,数据库里存储的是支付流水和交易流水 ...

  2. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  3. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  4. Partition：分区切换（Switch）

    在SQL Server中,对超级大表做数据归档,使用select和delete命令是十分耗费CPU时间和Disk空间的,SQL Server必须记录相应数量的事务日志,而使用switch操作归档分区表 ...

  5. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  6. Android注解使用之注解编译android-apt如何切换到annotationProcessor

    前言: 自从EventBus 3.x发布之后其通过注解预编译的方式解决了之前通过反射机制所引起的性能效率问题,其中注解预编译所采用的的就是android-apt的方式,不过最近Apt工具的作者宣布了不 ...

  7. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  8. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

随机推荐

  1. PHP学习笔记 - 进阶篇（1）

    PHP学习笔记 - 进阶篇(1) 数组 数组定义 $arr = array();表示创建一个空数组,并把创建的空数组赋值给变量$arr. 索引数组初始化 PHP有两种数组:索引数组.关联数组. 索引和 ...

  2. iOS安全——代码混淆&反编译

    本文是初步了解和集成网上的相关反编译博客, 并做公司内部技术人员分享研讨PPT.

  3. 一次完整的http请求所需要完成的步骤

    出处:简明现代魔法  http://www.nowamagic.net/librarys/veda/detail/1339 HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器 ...

  4. 40个容易上瘾的HTML5网页游戏,总有一款适合你

    我记得姐姐家的孩子在刚刚才学会走路,说话还不能完整的时候就已经能自己用小手点出小游戏的网站来一个人自娱自乐.我一直在想这一代跟着计算机一起茁壮成长的孩子会不会也和美国那一代人一样,出现9岁的黑客和计算 ...

  5. [zz] 使用ssh公钥密钥自动登陆linux服务器

    目录 .生成密匙对 .拷贝公匙到远程机 .启动登陆代理 这种方法处理后每次需要运行命令:ssh-add ~/.ssh/id_dsa 作为一名 linux 管理员,在多台 Linux 服务器上登陆进行远 ...

  6. c#基础笔记-----------集合

    首先所谓集合是用于管理对象的容器类.一方面集合将独立的对象汇集成群集,作为一个群集来管理,以便进行整体性操作:而另一方面,集合可以方便地获取群集中的个体,进行个体化操作.在.Net中,集合被封装为对象 ...

  7. Windows Phone 为指定容器内的元素设置样式

    在Windows Phone中设置元素样式有多种 拿TextBlock来说 1.我们可以直接在控件上设置: <TextBlock Text="自身样式设置" Width=&q ...

  8. 最全 Adobe 系列产品 CS6版本 序列号/注册码

    最全 Adobe 系列产品 CS6版本 序列号/注册码: 1.Adobe Photoshop CS6 Extended 序列号/注册码 2.Adobe After Effects CS6 序列号/注册 ...

  9. 【转载】GDB反向调试(Reverse Debugging)

    记得刚开始学C语言的时候,用vc的F10来调试程序,经常就是一阵狂按,然后一不小心按过了.结果又得从头再来,那时候我就问我的老师,能不能倒退回去几步.我的老师很遗憾地和我说,不行,开弓没有回头箭.这句 ...

  10. Eclipse必须掌握的快捷键

    Eclipse快捷键 Ctrl +  / 添加//注释.删除//注释 Ctrl + 1 快速修复错误 Ctrl + Shift + f 格式化文档 Shift + Enter Shift + Ctrl ...