<!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. C++ 数组名作为函数参数 都是我的错

    ]) { cout<<sizeof(arr); } 这样一道题,我以为输出的是100呢……32位系统,结果是4 因为:数组名在函数体中被当成一个指针来使用 #include <ios ...

  2. PHP基础在线视频教程高清版

    这个是我给大家介绍的PHP基础在线视频教程高清版,目前PHP慢慢垄断WEB的语言编写市场了,PHP 是一种服务器内置式的script 语言,它的出现使得在unix上快速地开发动态web成为现实.PHP ...

  3. Windows Phone 8.1 列表控件（2）：分组数据

    说到 List 控件,Windows Phone 8.1 上推荐使用的是 ListView 和 GridView. 而这两个控件实在太多东西可讲了,于是分成三篇来讲: (1)基本 (2)分组数据 (3 ...

  4. winfrom LED时钟

    public sealed class Clock : PictureBox { public Clock() { SetStyle(ControlStyles.AllPaintingInWmPain ...

  5. html5 的<audio> 音频 audio的“坑”

    <audio>标签是html5的一个非常有意义的特性.告别的flash的时代.它的属性有: autoplay:音频就绪后马上播放 controls:出现该属性,向用户显示播放的控件. lo ...

  6. JS实现图片翻书效果示例代码

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  7. Iso8601 日期格式

    unit Iso8601Unit; interface type TIso8601 = class(TObject) public class function DateTimeFromIso8601 ...

  8. Android SDK离线安装方法详解(加速安装) 转

    AndroidSDK在国内下载一直很慢··有时候通宵都下不了一点点,最后只有选择离线安装,现在发出离线安装地址和方法,希望对大家有帮助! 离线安装包下载地址:http://dl.vmall.com/c ...

  9. poj 2774 Long Long Message 后缀数组LCP理解

    题目链接 题意:给两个长度不超过1e5的字符串,问两个字符串的连续公共子串最大长度为多少? 思路:两个字符串连接之后直接后缀数组+LCP,在height中找出max同时满足一左一右即可: #inclu ...

  10. custom activities

    Useful Sharepoint Designer Custom Workflow Activities http://spdactivities.codeplex.com/ http://stac ...