<!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. PHP学习笔记 - 进阶篇（2）

    PHP学习笔记 - 进阶篇(2) 函数 1.自定义函数 PHP内置了超过1000个函数,因此函数使得PHP成为一门非常强大的语言.大多数时候我们使用系统的内置函数就可以满足需求,但是自定义函数通过将一 ...

  2. C# 添加,修改,删除文件夹/文件集合

    C#追加文件 StreamWriter sw = File.AppendText(Server.MapPath(".")+"\\myText.txt"); sw ...

  3. windows API 核心编程学习心得

    一.错误处理 在内部,当windows函数检测到错误时,它会使用“线程本地存储区”的机制将相应的错误代码与“主调线程”关联到一起. winError.h 一般在C:\Program Files\Mic ...

  4. iOS 非ARC基本内存管理系列 3-循环retain和@class

    1.@class 使用场景:对于循环依赖关系来说,比方A类引用B类,同时B类也引用A类: 可以看出Person和Card互相引用,此时如果使用#import编译报错!因此当使用@class在两个类中相 ...

  5. JAVA_SE复习（OOP2）

    面向对象编程(二) 一.static 关键字 静态属性 1.不能覆盖静态方法.要被覆盖的方法必须是非静态的.在继承链中具有相同方法名的两个静态方法是两个互相独立的类方法.调用子类的静态方法只是将父类的 ...

  6. 锋利的qjuey-ajax

    jquery 中的ajax   load方法主要获取web服务器上静态数据 1 load方法载入HTML文档 load(url [,data] [,callback]) $(function(){ $ ...

  7. 认识HTML5

    引言,认识两个标准制定的组织 在讲什么是Html5之前得先了解两个组织:WHATWG :网页超文本技术工作小组(英语:Web Hypertext Application Technology Work ...

  8. Jquery实现手机上下滑屏滑动的特效代码

    要引入两个jquery插件 可以去网上下载 <script src="jquery-1.11.1.min.js"></script><script s ...

  9. PHP 归并排序

    在我们日常的程序开发时候,有时候需要对一个已知的集合按照一定的规则进行排序,其实当数据的规模不太大时或者数据的有序特征比较明显,其实我们可以采用其它的排序算法例如:Bubble Sort, Inser ...

  10. centos6.5 最小化安装无法上网

    在VMware里装了个centos 6.5.  最小化安装后无法上网.在 google里找到答案 第一步:执行命令启动网卡 (最小化安装不是自动启动的) [root@localhost]# ifcon ...