<!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. OC3_dealloc

    // // Dog.h // OC3_dealloc // // Created by zhangxueming on 15/6/18. // Copyright (c) 2015年 zhangxue ...

  2. 关于jQuery中.attr()和.prop()的问题

    话说写了几句代码在ie8上能正常运行,chrome和ff却不行,朋友说这就是RP啊,郁闷! 其实功能需求是这样的,两个radio:男和女,一个button:重置.启动页面默认选中男,在用户选择女之后又 ...

  3. 【转载】学习C++和编程的几个要点

    1.把C++当成一门新的语言学习(和C没啥关系!真的.):2.看<ThinkingIn C++>,不要看<C++变成死相>:3.看<The C++ Programming ...

  4. myeclipse 的 working set

    想必大家的myeclipse会有很多工程看的和不方便,那么怎么让它看的简洁一点呢,使用working set 会让你的目录看起来没有那么的多. 首先是怎么创建 working set  ,在新建时选择 ...

  5. 定时备份服务器数据库（借助windows任务计划以及mysqldump）

    最近社区多了,考虑到数据的安全性,要每天备份一次数据库,以防万一: linux目前还不是很了解,先用windows的计划任务吧: 大体思路就是 借用windows的计划任务来执行备份远程数据库到本地: ...

  6. Android图像处理1

    项目开发要用,在慕课中学习了一下关于Android图像处理的相关功能,并进行了整理. 在Android中,我们通过最基本的改变图像的RGBA值,改变图像的颜色与饱和度. Android中有ColorM ...

  7. python 模拟ajax查询社工库...

    在windows中使用,输入有关信息查询社工库,本来是网页版的,我把ajax请求提取出来.粗略的封装下,挺好玩. #coding:utf8 import urllib2,urllib from Bea ...

  8. wxPython 基本框架与运行原理 -- App 与 Frame

    <wxPython in Action> chapter 1.2 笔记 wxPython 是 wxWidgets 的 Python 实现,“w” for Microsoft Windows ...

  9. python 对象持久化 pickle模块

    用到python 序列化 比如我们可以把一些配置的信息放到数组,字典或者做为类的属性,然后对数据进行 序列化,再把序列化好的数据放到文件里或者直接放到数据库里,这样可以方便下次要用数据的时候 对数据进 ...

  10. esp8266的STM32驱动

    esp8266的STM32驱动,数据发送接收由DMA完成,释放CPU. 目前只能发送返回消息为成功或失败的AT命令,并判断是否成功,详见esp8266_cmd():其它返回消息不可预知的命令(如查看A ...