<!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">

            var options = {

                    chart:{

                        renderTo:'container',

                        plotBackgroundColor:null,

                        plotBorderWidth:null,

                        plotShadow:false,

                        events:{

                            load:function(){

                            /*

                                var series = this.series[0];

                                setInterval(function(){

                                    var data = [];

                                    data.push(['Firefox',Math.random()]);

                                    data.push(['IE',Math.random()]);

                                    data.push(['Safari',Math.random()]);

                                    data.push(['Opera',Math.random()]);

                                    data.push(['Others',Math.random()]);

                                    series.setData(data);

                                },2000);

                                */

                            }

                        }

                    },

                    credits:{

                        enabled:true,

                        href:'http://www.cnblogs.com/xiaoxian1369/p/3765180.html',

                        text:'qingyezhu'

                    },

                    title:{

                        text:'<b>HighchartsDemo1</b>'

                    },

                    tooltip:{

                        pointFormat:'{series.name}:<b>{point.y}</b>'

                    },

                    labels:{

                        items:[{

                            html:'http://www.cnblogs.com/xiaoxian1369/p/3765180.html" target="_blank">qingyezhu</a>',

                            style:{

                                left:'532px',

                                top:'160px'

                            }

                        }],

                        style:{

                            color:'red',

                            fontSize:45,

                            fontWeight:'bold',

                            zIndex:1000

                        }

                    },

                    series:[{

                        name:'Browser share',

                        data:[

                            ['Firefox',45.8],

                            ['IE',75.8],

                            ['Safari',5.8],

                            ['Opera',8.2],

                            ['Others',12.7]

                            ]

                    }]

            };

            var chart;

            $(document).ready(function(){

                chart = new Highcharts.Chart(options);

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

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

                    if(type=="pie"){

                        options.tooltip.pointFormat = '{series.name}:<b>{point.percentage:.lf}%</b>';

                    }else{

                        options.tooltip.pointFormat = '{series.name}:<b>{point.y}</b>';

                    }

                    options.chart.type = type;

                    chart = new Highcharts.Chart(options);

                });

            });

        </script>

    </head>

    <body>

        <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>

        <div id="container" style="width:800px;height:400px;"></div>

    </body>

</html>

highcharts 切换的更多相关文章

  1. highcharts 多数据+切换

    var highchartsOptions = { chart:{ renderTo:'container' }, title:{ text:'指标数据' }, tooltip:{ pointForm ...

  2. 使用Highcharts实现图表展示

    本篇随笔记录的是本人2011年做广州地铁协同办公项目时,图表需求的解决方案.(Demo中只是虚拟的测试数据) 关键技术点: 使用Highcharts实现图表展示: 另外使用Highslide弹窗.使用 ...

  3. 关于Highcharts图表组件动态修改属性的方法（API）总结之Series

    Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏.这两者才是Highcharts图表组件的重中之重啊.接下来就为大家介绍关于设置Seri ...

  4. ASP.NET MVC4 + Highcharts生成报表

    //后端 public ActionResult TighteningReport(BReportTighteningReportModel model, string rate, string we ...

  5. highcharts图表组件入门教程：如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  6. 在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图

    开发背景: 今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. 首 ...

  7. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  8. HighCharts学习笔记（一）

    HighChars基本概述 Highcharts是一个纯js写成的插件库,很好的外观表现可以满足任何图标需求. 开始使用chart之前进行配置 全局配置: Highcharts.setOptions( ...

  9. 使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法

    工作中用到, 这里分享一下. 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图. 当然, 对图形没有过多装饰, 可以参考 API 文档: highcharts:   ...

随机推荐

  1. UINavigationController切换视图的简单使用

    UINavigationController通过栈的方式来管理视图,通过push将视图压入栈,pop将视图推出栈. 下面通过简单的示例说明 AppDelegate.m - (BOOL)applicat ...

  2. (转)卸载和安装LINUX上的JDK

    卸载默认的: 用root用户登陆到系统,打开一个终端输入 # rpm -qa|grep gcj 显示内容其中包含下面两行信息 # java-1.4.2-gcj-compat-1.4.2.0-27jpp ...

  3. Java+Mysql+学生管理系统

    最近正在学java和数据库,想起以前写的学生管理系统,都是从网上下载,敷衍了事.闲来无事,也就自己写了一个,不过功能实现的不是很多. 开发语言:java: 开发环境:Mysql, java: 开发工具 ...

  4. 09_Java8操作集合的一些新特性

    [使用forEach()结合Lambda表达式遍历集合] public class ForEachDemo { public static void main(String[] args) { Col ...

  5. [GeekBand] C++11~14

    一.关键字decltype 由对象得到对象的数据类型,例如 Complex  a(1,  2);     decltype(a)  b(3,  4);     declare type是让编译器去找到 ...

  6. 2014-10 u-boot make过程分析

    /** ****************************************************************************** * @author    Maox ...

  7. 安装完MySQL后必须要调整的10项配置

    2014年02月10日11:11 来源:开源中国 作者:BoydWang, 美好的2014, DrZ 编辑:徐志远 标签: 配置 , mysql , 数据库 [IT168 评论]当我们被人雇来监测My ...

  8. 《Java并发编程实战》读书笔记（更新中）

    一.简介 1.多线程编程要注意的几点: 安全性:永远不发生糟糕的事情 活跃性:某件正确的事情最终会发生(不会发生无限循环或者死锁) 性能:正确的事尽快发生(上下文切换消耗之类的) 二.线程安全 1.为 ...

  9. Python print语句

    1. 输出字符串 >>> strHello = 'Hello World' >>> print (strHello) Hello World 2. 格式化输出整数 ...

  10. python中执行javascript代码

    python中执行javascript代码: 1.安装相应的库,我使用的是PyV8 2.import PyV8 ctxt = PyV8.JSContext()     ctxt.enter()     ...