<!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#中实现抽象类里建立静态方法

    这篇文章主要介绍了C#中实现抽象类里建立静态方法,需要的朋友可以参考下   本文简述了C#中实现抽象类里建立静态方法的解决办法,示例程序如下: 1 2 3 4 5 6 public class Tes ...

  2. OpenGL7-1-快速绘制接口(使用高效的函数接口进行绘制)

    代码下载 #include "CELLWinApp.hpp"#include <gl/GLU.h>#include <assert.h>#include & ...

  3. MVC 生成PDf表格并插入图片

    最近做的项目中有一个功能,将最终的个人信息生成PDF表格,并插入图片.对于没接触过的程序员来说回一片茫然,网上有多种生成PDf的方法,我给大家介绍一下我认为比较简单,好操作的一种. iTextShar ...

  4. 【leetcode】352. Data Stream as Disjoint Intervals

    问题描述: Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers ...

  5. oracle的decimal和number的对比

    Oracle只是在语法上支持decimal类型,但是在底层实际上它就是number类型,支持decimal类型是为了能把数据从Oracle数据库移到其他数据库中(如DB2等). 因为decimal在O ...

  6. Android 自定义CheckBox 样式

    新建Android XML文件,类型选Drawable,根结点选selector,在这定义具体的样式. <?xml version="1.0" encoding=" ...

  7. MVC3缓存：使用页面缓存

    在以前的WebForm的开发中,在页面的头部加上OutputCache即可启用页面缓存,而在MVC3中,使用了Razor模板引擎的话,该如何使用页面缓存呢?如何启用 在MVC3中要如果要启用页面缓存, ...

  8. 01_mvc保存时出错

    修改实体类报错 存储区更新.插入或删除语句影响到了意外的行数(0).实体在加载后可能被修改或删除.刷新 ObjectStateManager 项.   原因是 数据表中的自增主键列未赋值.

  9. WCF、WebAPI、WCF REST、Web Service之间的区别

    在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我分享一下我对 ...

  10. Node.Js之【Stream 之复制文件问题】

    var fs = require('fs'), path = require('path'), out = process.stdout; var filePath = 'F:/IMG_0221.MO ...