highCharts 饼图动态加载

Posted 2020-08-16 小赵的博客

　　　　　　　　　　　　　　　　饼图的动态加载　　　　　　　　　　　　

(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>