<!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. 使用Emmet(前身Zen Coding)加速Web前端开发

    Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章 ...

  2. (转)使用CruiseControl+SVN+ANT实现持续集成之三

    在上一节中我们介绍了环境搭建和配置介绍,并快速启动CC查看集成结果,在本节中我们将详细介绍CC构建操作及监视. 1. 启动CC服务器 通过执行其根目录下的cruisecontrol.bat文件来启动C ...

  3. css3学习笔记之多列

    CSS3 创建多列 column-count 属性指定了需要分割的列数. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!D ...

  4. [DevExpress]ChartControl之饼状图百分比示例

    关键代码: using System; using System.Data; using System.Windows.Forms; using DevExpress.XtraCharts; name ...

  5. Excel数据复制到Winform控件ListView

    先给窗体添加一个右键菜单contextMenuStrip 加一个下拉项[粘贴] 粘贴事件: private void tsmiPaste_Click(object sender, EventArgs ...

  6. 两个list 求交集效率对比

    __author__ = 'daitr' #--coding:utf-8-- import datetime #方法一: #a=[2,3,4,5] #b=[2,5,8] #tmp = [val for ...

  7. CentOS6.5 MySQL 配置设置总结笔记

    三.登录MySQL 登录MySQL的命令是mysql, mysql 的使用语法如下:  mysql [-u username] [-h host] [-p[password]] [dbname]  u ...

  8. Python通过Manager方式实现多个无关联进程共享数据

    Python官方文档 Python实现多进程间通信的方式有很多种,例如队列,管道等. 但是这些方式只适用于多个进程都是源于同一个父进程的情况. 如果多个进程不是源于同一个父进程,只能用共享内存,信号量 ...

  9. 干净的 ef for Oracle appconfg配置

    <?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...

  10. win 7 64位如何安装erdas 9.2

    最主要的就是crack包必须包含这三个文件：erdas.exe、license.dat和lmgrd.exe 将这三个文件都复制到C盘安装目录下bin中，其余安装同win 7 32位系统