饼图的动态加载            

(1):导入样式

<script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/highCharts/highcharts.js"></script>

(2):代码

<script type="text/javascript">
        var chart;    

            $(function () {
                $(document).ready(function() {
                    chart = new Highcharts.Chart({
                        //常规图表选项设置
                        chart: {
                            renderTo: 'container',        //在哪个区域呈现,对应HTML中的一个元素ID
                            plotBackgroundColor: null,    //绘图区的背景颜色
                            plotBorderWidth: null,        //绘图区边框宽度
                            plotShadow: false            //绘图区是否显示阴影            
                        },
                        
                        //图表的主标题
                        title: {
                            text: '公司比例图'
                        },
                        //当鼠标经过时的提示设置
                        tooltip: {
                            pointFormat: '<h2>{series.name}</h2>: <b>{point.percentage}%</b>',
                            percentageDecimals: 1
                        },
                        //每种图表类型属性设置
                        plotOptions: {
                            //饼状图
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    color: '#000000',
                                    connectorColor: '#000000',
                                    formatter: function() {
                                        //Highcharts.numberFormat(this.percentage,2)格式化数字,保留2位精度
                                        return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
                                    }
                                }
                            }
                        },
                           //图表要展现的数据
                        series: [{
                            type: 'pie',
                            name: '比率'
                        }]
                    });
                });
                getData();
            });
         
           /* $(function(){
                    $('.form_datetime').datetimepicker({
                           minView: "month", //选择日期后,不会再跳转去选择时分秒
                           language:  'zh-CN',
                           format: 'yyyy-mm-dd',
                           todayBtn:  1,
                           autoclose: 1,
                       });
                    $("#button").click(function(){
                        var startTime = $("#startTime").val();
                        var endTime = $("#endTime").val();
                        if(startTime != '' && endTime != ''){
                            if(confirm("确定要查询日期"+startTime+"至"+endTime)){
                                //myLineChart.destroy();
                                getData();
                            }
                        }else{
                            alert("请正确输入");
                        }
                       
                    });
           });*/
            
            
        function getData(){
            //var startTime = $("#startTime").val();
           //var endTime = $("#endTime").val();
             //异步请求数据
            $.ajax({
                type:"GET",
                url:"<%=request.getContextPath()%>/charts/getChartsPie.action?startTime="+startTime+"&endTime="+endTime ,
                dataType:'json',        
                success:function(data){
                    if(data == ''){
                        alert("亲,请重新选择正确的时间");
                    }else{
                        //定义一个数组
                        browsers = [],
                        //迭代,把异步获取的数据放到数组中
                        $.each(data,function(i,d){
                            browsers.push([d.type,d.dataCount]);
                        });
                        //设置数据
                        chart.series[0].setData(browsers);
                    }
                },
                error:function(e){
                    alert(e);
                }
            });
        }
        
        </script>
                                                                                                                                                                      (3)html代码

    <div id="container" style="min-width: 400px; height: 400px;margin-bottom: 150px"></div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

highCharts 饼图动态加载的更多相关文章

  1. highcharts 柱状图 动态加载

    highcharts柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getCo ...

  2. js动态加载css和js

    之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjs ...

  3. geotrellis使用(二十三)动态加载时间序列数据

    目录 前言 实现方法 总结 一.前言        今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...

  4. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  5. Ext动态加载Toolbar

    在使用Ext的GridPanel时候,有时候需要面板不用重新加载而去更新Store或者Toolbar,Store的方法有很多,例如官方api给我们提供的Store.load(),Store.reLoa ...

  6. Android动态加载框架汇总

    几种动态加载的比较 1.Tinker 用途:热修复 GitHub地址:https://github.com/Tencent/tinker/ 使用:http://www.jianshu.com/p/f6 ...

  7. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  8. html中的图像动态加载问题

    首先要说明下文档加载完成是什么概念 一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 ...

  9. 非常郁闷的 .NET中程序集的动态加载

    记载这篇文章的原因是我自己遇到了动态加载程序集的问题,而困扰了一天之久. 最终看到了这篇博客:http://www.cnblogs.com/brucebi/archive/2013/05/22/Ass ...

随机推荐

  1. [转]一些TCP和UDP使用问题汇总

    下面是在实际后台开发中遇到的一些关于TCP和UDP的问题,这里慢慢积累起来: UDP连续发送2次数据包,第一次发100字节,第二次发200字节,服务端recvfrom(1000)时收到100.200还 ...

  2. [2014.01.27]wfPrintOcx 票据打印控件 v5.3

    支持选择打印机,并自动记忆选择的打印机. 适合打印各类票据格式. 支持画正方形.长方形.圆形.椭圆.横线.竖线.HTTP图片. 支持数字金额转换成中文大写金额. 可以设置固定宽度的文字自动换行. 组件 ...

  3. 常用Web Service汇总(天气预报、时刻表等)

      现成的Web Service中有很多很好用的,比如天气预报,IP地址搜索,火车时刻表等等.本文汇总的一些常用Web Service,希望对大家有所帮助. AD: ================= ...

  4. atom 调用g++编译cpp文件

    atom 有script插件可以直接调用很多编译器,试了很多次一直出问题找不到文件,查了文档之后发现script只支持OSX和linux. 所以,还是使用gpp-compiler比较靠谱 gpp-co ...

  5. Temporary-Post-Used-For-Style-Detection-Title-16761156

    Temporary-Post-Used-For-Style-Detection-Content-16761156 =-=-=-=-=Powered by Blogilo

  6. modelsim操作流程

    1.File->Change Directory2.File->New->Library 在弹出的对话框中选择 a new library and a logical mapping ...

  7. Java lamda Stream

    Intermediate:一个流可以后面跟随零个或多个 intermediate 操作.其目的主要是打开流,做出某种程度的数据映射/过滤,然后返回一个新的流,交给下一个操作使用.这类操作都是惰性化的( ...

  8. Unity代码设置shader属性

    主要是用到了Material.SetTexture这个方法,具体可以参考如下: 举个例子,比如我想用代码动态控制Skybox/Cubemap下的Cubemap,可以这样写: public Cubema ...

  9. 使用JavaScript的Join方法

    在本例中,我们将创建一个数组,然后把它的所有元素放入一个字符串: <script type="text/javascript"> var arr = new Array ...

  10. metasploit渗透初探MR.robot(一)

    看了MR.robot,有一种研究渗透技术的冲动, 网上也看了些教程,要从kali linux说起, 下载vmware 12,http://www.vmware.com/go/tryworkstatio ...