highCharts 饼图动态加载

2024-03-28 23:06:17

　　　　　　　　　　　　　　　　饼图的动态加载　　　　　　　　　　　　

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

最新文章

热门文章