Highcharts+Spring饼图使用实例

项目上要用到Hightcharts展示平台机器占用情况,使用这类第三方插件很方便就能实现

JSP:

    
    
    
    

     
     
     
     
 
      <script type="text/javascript" src="<%=basePath%>/resources/thirdparty/highcharts/highcharts.js"></script> 
     
     
     
     
     
 
      <div id="machineRate" title="按产品线统计机器占比" style="display:inline; width:50%;float: left"></div> 
     
    
    
    
    

JS:

/**查看机器占比(按产品线) [email protected] 2015/8*/
function loadMachineRate(){
	var chart;
	$(document).ready(function(){
		chart = new Highcharts.Chart({
			//常规图表选项设置
            chart: {
                renderTo: 'machineRate',        //在哪个区域呈现，对应HTML中的一个元素ID
                plotBackgroundColor: null,    //绘图区的背景颜色
                plotBorderWidth: null,        //绘图区边框宽度
                plotShadow: false            //绘图区是否显示阴影            
            },
            //图表的主标题
            title: {
                text: '按产品线统计机器占比'
            },
            //当鼠标经过时的提示设置
            tooltip: {
                pointFormat: '{series.name}: <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: '机器占比'
            }]
            
		});
	});
	$.ajax({
		type : "GET",
		url : "machine/getStaticMachineRateByProductLine",
		success : function(data){
			
			//定义一个数组
	        browsers = [],
	        //迭代，把异步获取的数据放到数组中
	        $.each(data,function(i,d){
	        	var str = "";
	        	switch (d.businessType) {
				case "BUSINESS_WEB":
					str = "网页";
					break;
				case "BUSINESS_DOWNLOAD":
					str = "下载";
					break;
				case "BUSINESS_PLAY":
					str = "点播";
					break;
				case "BUSINESS_VIDEO":
					str = "视频";
					break;
				case "BUSINESS_STREAMING":
					str="流媒体";
					break;
				case undefined:
					str="其他";
					break;
				default:
					break;
				}
	            browsers.push([str,d.machineCount]);
	        });
	        //设置数据
	        chart.series[0].setData(browsers);  
		},
		error : function(e){
			/*alert(e);*/
		}
	});
}

Controller:

/**
 * 根据产品线统计机器的占比(饼图)
 */
@RequestMapping("/getStaticMachineRateByProductLine")
@ResponseBody
public List<Map<String, Integer>> getStaticMachineRateByProductLine(){
	List<Map<String, Integer>> machines =  platformMachineService.getStaticMachineRateByProductLine();
	return machines;
}

Service:

/** 根据产品线统计机器占比(饼图)*/
@Override
public List<Map<String, Integer>> getStaticMachineRateByProductLine() {
	return this.platformMachineMapper.getStaticMachineRateByProductLine();
}

Mapper:

/** 根据产品线统计机器占比*/
public List<Map<String, Integer>> getStaticMachineRateByProductLine();

XML:

<!-- 根据产品线查看机器占比 -->
<select id="getStaticMachineRateByProductLine" resultType="Map">
	SELECT pi.pl_business_type AS businessType,COUNT(mc_id) AS machineCount
	FROM platform_machine pm
	LEFT JOIN platform_info pi ON pi.pl_name_en = pm.current_platform
	GROUP BY pi.pl_business_type 
	ORDER BY machineCount DESC
</select>