<!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. C#编写以管理员身份运行的程序

    using System; using System.Collections.Generic; using System.Linq; using System.Windows.Forms; names ...

  2. (转)实战Memcached缓存系统（5）Memcached的CAS程序实例

    1. 非CAS 首先看一个不是CAS的Memcached程序实例.实例的问题原型,见上一篇博文. 程序实例: package com.sinosuperman.memcached; import ja ...

  3. 从0开始学习react（三）

    这次我们来讲解第三节知识,考虑了下,先不去讲什么理论了,毕竟网上一搜一大堆,而且理论真心看不太懂啊!!! 今天我们就直接上实例喽! 大家HIGH起来!!!(想了好久,还是没舍得删这句话) 1.根据下图 ...

  4. 指针与strncpy---内存

    指针的形式的赋值和strncpy的赋值 e.SetAttr("Amt", ToString(dAmt)      ); e.SetAttr("Amt", sAm ...

  5. 反编译.o到.cpp

    反编译.o到.cpp 现在有很多反编译是对Java的,而.cpp的很少 因为不同的平台.cpp生成的.o是不一样的,但是Java因为有虚拟机的中间作用,生成的.o在不同平台是一样的 反编译的机理 (通 ...

  6. python 函数应用

    #函数的参数就是个变量 #定义函数的时候,使用关键字参数,可以指定默认值 def hello(name='reboot',age=1): return 'hello %s,your age is %s ...

  7. javascript多线程简介

    讲多线程之前,我们先了解一下JS的事件机制 浏览器运行时,脚本必须定期让位给UI进程进行来维持网页的响应,闲置太长时间的脚本可能会被浏览器当成失控脚本,进而造成假死或弹窗 事件触发的设计javascr ...

  8. 中科红旗倒下，谁来挑战windows

    中科红旗解散 国产操作系统从此梦断 2月10日,关门上锁的中科红旗北京总部大门上粘贴了一张最新公告,这张公告彻底击破了那些仍然坚守公司工作的员工“拯救中国红旗”的希望.该公告称:因北京中科红旗软件技术 ...

  9. php下删除一篇文章生成的多个静态页面

    php自定义函数之删除一篇文章生成的多个静态页面,可能有多页的文章,都是需要考虑到的. 复制代码代码如下: //– 删除一篇文章生成的多个静态页面  //– 生成的文章名为 5.html 5_2.ht ...

  10. String类源码分析(JDK1.7)

    以下学习根据JDK1.7String类源代码做注释 public final class String implements java.io.Serializable, Comparable<S ...