<!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. iOS开发——开发者官网注册新设备

    1.第一步登陆苹果开发者中心官网,进入证书栏后如下图:点击All 或者如果是iPhone设备直接点击iPhone也行. 然后点击右上角的[+]号

  2. C#中委托和事件的区别实例解析

    这篇文章主要介绍了C#中委托和事件的区别,并分别以实例形式展示了通过委托执行方法与通过事件执行方法,以及相关的执行流程与原理分析,需要的朋友可以参考下 本文实例分析了C#中委托和事件的区别,分享给大家 ...

  3. String.Trim

    String.Trim有2个重载方法,分别是:Trim()和Trim(char[]),根据官方的解释 Trim():从当前String对象移除所有前导空白字符和尾部空白字符. Trim(char[]) ...

  4. javascript 笔记——setTimeout的参数问题

    setTimeout("xxx",500) 双引号中的作用域不捕捉局部变量,因此会报错误 如果你需要在双引号中可以在外部定义一个变量 var now; window.onload ...

  5. Comparator和Comparable

    java.util 接口 Comparator<T>   compare int compare(T o1, T o2) 比较用来排序的两个参数.根据第一个参数小于.等于或大于第二个参数分 ...

  6. GC日志补充

    根据日志,确实发生了FullGC,计算资源被耗光 Java HotSpot(TM) 64-Bit Server VM (24.79-b02) for windows-amd64 JRE (1.7.0_ ...

  7. grails导入excel

    grails导入excel,意思是说从excel表中读取多条数据,批量写入数据库. 有2种方案,1是使用grails的excel插件,2是调用java代码使用POI等第三方java控件. 今天比较累, ...

  8. jquery checkBox的问题

    在新版的jquery中选择ckeckbox最好使用prop方法,否则会出现一些问题.比如手动点击取消,再使用代码全选或者反选时候就不好使啦!!!

  9. 《CSS3使用指南》读书笔记

    一.CSS3的来龙去脉 1.CSS3的新特性: 1)不依赖图片的视觉效果 2)盒容器变形 3)独一无二的字体 4)强大的选择器 5)过渡与动画 6)媒体信息查询 7)多列布局 2.CSS标准发布分5个 ...

  10. Java语法糖

    1.创建数组:String[] s = new String[]{"1","2","3"};//这种方法可以在不指定数组元素数量的情况下生成 ...