highcharts 饼图

刚入门菜鸟一只

搞了一个晚上-------(:

需求: 使用Ajax请求后台,后台传回json的map,前台解析传给highcharts制作饼图

优点: 使用Map不用新建类, 前台解析灵活性强,饼分的个数不会受限制(根据后台的数据来分)

后台代码如下:

package com.xdl.web.controller;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import org.springframework.context.ApplicationContext;import org.springframework.context.support.ClassPathXmlApplicationContext;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.xdl.dao.DatabaseInfDao;@Controllerpublic class GetVideoInfController {//请求地址@RequestMapping("/getVideoInfByBig_type.do")//返回值为json@ResponseBodypublic List<Map<String, Integer>> getVideoInfByBig_type(){//创建容器ApplicationContext ac=new  ClassPathXmlApplicationContext("applicationContext.xml");//获取Dao层DatabaseInfDao dif = ac.getBean("databaseInfDao",DatabaseInfDao.class);//获取数据List<Map<String, Object>> bigtype_idAll = dif.getBigtype_idAll();List<Map<String, Integer>> list=new ArrayList<>();for(Map<String, Object> map1:bigtype_idAll){Integer count = dif.getVideoInfByBig_type((int)map1.get("id"));Map<String, Integer> map=new HashMap<>();map.put((String)map1.get("name"), count);list.add(map);}//得到list集合返回System.out.println(list);//list中的数据库中获取的[{前端开发=668}, {后端开发=939}, {移动开发=375}, {数据库=506}, {UI设计=513}]return list;}}

前端jsp代码:

<script type="text/javascript">$(function () {var chart;     $(document).ready(function() {         chart = new Highcharts.Chart({        chart: {            renderTo: 'container',//设置词饼图在哪显示                     plotBackgroundColor: null,            plotBorderWidth: null,            plotShadow: false        },        title: {            text: 'Browser market shares at a specific website, 2010'        },        tooltip: {        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'        },        plotOptions: {            pie: {                allowPointSelect: true,                cursor: 'pointer',                dataLabels: {                    enabled: true,                    color: '#000000',                    connectorColor: '#000000',                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'                }            }        },        series: [{                type: 'pie',                name: '份额'            }]});    });$.ajax({url:"getVideoInfByBig_type.do",dataType:"json",cache: true,        type: "POST",        data:null,        async: true,        success:function(data){            //定义一个数组            maps = [],            //循环迭代            $.each(data,function(i,d){            //d为一个map对象            for(var key in d){                    //向maps中添加数据                   maps.push([key,d[key]]);            }             alert(maps);            });            //设置饼图中的数据(这一步很关键)            chart.series[0].setData(maps);          },        error:function(){        alert("error");        }    });});</script>

<!-- 这是显示饼图的区域 --><div id="container" style="min-width:700px;height:400px"></div>