<!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. MLlearning（1）——kNN算法

    这篇文章讲kNN(k近邻,k-Nearest Neighbour).这是一种lazy-learning,实现方便,很常用的分类方法.约定n为样本集中的样本数,m为样本的维度,则这个算法的训练复杂度为0 ...

  2. dispatch_async & dispatch_sync

    Clear that! dispatch_async 是将block发送到指定线程去执行,当前线程不会等待,会继续向下执行. dispatch_sync 也是将block发送到指定的线程去执行,但是当 ...

  3. Js中的变量

    1.什么是变量? 在JavaScript中,一种可变的量就称为变量.变量是用来临时存储数据的容器.变量是存在内存中. 2.定义变量 使用var关键字来声明变量 如下图: 3.变量名的命名规则 变量名可 ...

  4. 函数 resize和reserve的区别

    reserve是容器预留空间,但在空间内不真正创建元素对象,所以在没有添加新的对象之前,不能引用容器内的元素.加入新的元素时,要调用push_back()/insert()函数. resize是改变容 ...

  5. 视酷即时通讯系统应用源码 V1.0

    视酷即时通讯系统(原创),成熟稳定,拥有和微信一样强大的功能不再是梦,节省几个月研发时间迅速融合进项目中: 1.首家支持聊天室群聊 2.支持和微信一样的语音聊天,可以显示时长.未读状态,自动轮播未读语 ...

  6. grails的插件

    今天来歪理邪说一下grails的插件. 有个问题让本人困惑了一段时间,插件是属于grails的,还是属于某个工程的?为什么会有这个问题呢,这涉及到grails插件的安装方式. grails的插件像是一 ...

  7. PHP、Java、C#实现URI参数签名算法，确保应用与REST服务器之间的安全通信，防止Secret Key盗用、数据篡改等恶意攻击行为

    简介 应用基于HTTP POST或HTTP GET请求发送Open API调用请求时,为了确保应用与REST服务器之间的安全通信,防止Secret Key盗用.数据篡改等恶意攻击行为,REST服务器使 ...

  8. ajax分页效果实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 支持 IE8 IE11 和 FF, Chrome 浏览器的圆角

    .rounded-corners { position: relative behavior: url(/Styles/PIE.htc); //这里一定是“/”根目录 border-radius: 2 ...

  10. ECSHOP购物流程收货人信息详细地址显示省市区

    方法一: 1.在flow.php中的 elseif ($_REQUEST['step'] == 'checkout') 中 $_SESSION['flow_consignee'] = $consign ...