Highcharts获取Json动态生成饼图

导入的文件

script代码

<!-- 导入文件-->
<script type="text/javascript"src="${pageContext.request.contextPath}/js/jquery-1.8.0.min.js"></script>
<script src="${pageContext.request.contextPath}/js/highcharts.js"></script>
<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',
                                events: {
                                 //绑定点击事件获取饼状图中的值
                                    click: function (e) {pieClick(e.point.name);}    
                                }
                            }
                        },
                           //图表要展现的数据
                        series: [{
                            type: 'pie',
                            name: '比率'
                        }]
                    });
               });
                //ajax加载动态数据
                getData();
            });
function getData(){
     //异步请求数据
    $.ajax({
        type:"GET",
        //请求路径
        url:"${pageContext.request.contextPath}/Controller_Data/queryList" ,
        dataType:'json',        
        success:function(data){   

                //定义一个数组
                browsers = [],
                //迭代，把异步获取的数据放到数组中
                $.each(data,function(i,d){                
                    browsers.push([d.name,d.y]);
                });
                //设置数据
                chart.series[0].setData(browsers);
            }      
    });
}
//点击饼状图获取我点击的数据
function pieClick(name){
 alert(name)
   }
  </script>

HTML代码

<div id="container"
  style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

后台代码 （我是用的sping mvc 和json）

@Controller
@RequestMapping("/Controller_Data")
public class Controller_Data {
 
 @RequestMapping("queryList")
 @ResponseBody   // 这里使用json返回
 public List queryList(){ 
  
  List list= new ArrayList();
  HashMap hashMap = new HashMap();  
  hashMap.put("name", "上周数量");
  hashMap.put("y", 0); 
  list.add(hashMap);
  
  HashMap hashMap1 = new HashMap();  
  hashMap1.put("name", "本周数量");
  hashMap1.put("y", 1);  
  list.add(hashMap1);
  
  return list;
  
   }
 }
 

效果图

点击获取name

点击之后想要弹出层的代码

---

Style代码

<style>
  *{padding:0px;margin:0px;}
        .pop {  display: none;  width: 600px; min-height: 470px;  max-height: 750px;  height:470px;  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  margin: auto;  padding: 25px;  z-index: 130;  border-radius: 8px;  background-color: #fff;  box-shadow: 0 3px 18px rgba(100, 0, 0, .5);  }
        .pop-top{  height:40px;  width:100%;  border-bottom: 1px #E5E5E5 solid;  }
        .pop-top h2{  float: left;  display:black}
        .pop-top span{  float: right;  cursor: pointer;  font-weight: bold; display:black}
        .pop-foot{  height:50px;  line-height:50px;  width:100%;  border-top: 1px #E5E5E5 solid;  text-align: right;  }
        .pop-cancel, .pop-ok {  padding:8px 15px;  margin:15px 5px;  border: none;  border-radius: 5px;  background-color: #337AB7;  color: #fff;  cursor:pointer;  }
        .pop-cancel {  background-color: #FFF;  border:1px #CECECE solid;  color: #000;  }
        .pop-content{  height: 380px;  }
        .pop-content-left{  float: left;  }
        .pop-content-right{  width:310px;  float: left;  padding-top:20px;  padding-left:20px;  font-size: 16px;  line-height:35px;  }
        .bgPop{  display: none;  position: absolute;  z-index: 129;  left: 0;  top: 0;  width: 100%;  height: 100%;  background: rgba(0,0,0,.2);  }
    </style>

HTML代码

<!--遮罩层-->
<div class="bgPop"></div>
<!--弹出框-->
<div class="pop">
    <div class="pop-top">
        <h2>课程介绍</h2>
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content">
        <div class="pop-content-left">
            <img src="" alt="" class="teathumb">
        </div>
        <div class="pop-content-right">
            <p>课程名称：<b class="lname"></b></p>
            <p>课程价钱：<b class="price"></b></p>
            <p>上课时间：<b class="ltime"></b></p>
            <p>上课老师：<b class="teacher"></b></p>
            <p>老师简介：<b class="teasynopsis"></b></p>
            <p>课程简介：<b class="synopsis"></b></p>
        </div>
    </div>
    <div class="pop-foot">
        <input type="button" value="关闭" class="pop-cancel pop-close"/>
        <input type="button" value="报名" class="pop-ok"/>
    </div>
</div>

效果图