项目经验：Highcharts绘制饼图、折线图、柱状图

需要引入highcharts.js

<script src="<%=path%>javascript/highChars/highcharts.js" type="text/javascript"></script>

饼图js代码：

//1.水质类别比例 根据选择时段、选择测站查询水质站评价结果 结果根据水质类别进行汇总
function getWQPercentageMap(){
	var xzsd =document.getElementById("wqersModel.xzsd").value;
	var xzzd =document.getElementById("wqersModel.xzzd").value;
	if(xzsd!=null&&xzsd!=""&&xzzd!=null&&xzzd!=""){
		var strPara = {'wqersModel.xzsd':xzsd,'wqersModel.xzzd':xzzd,};
		$.ajax({
	        type: "POST",
	        url:'<%=basePath%>wqerstatistics/getWQPercentageMap.action',
	        data: strPara,
	        success: function(msg) {
	        	var msg = eval("("+msg+")");
	        	var array = new Array();
	        	//由于highcharts纵坐标不能接受字符串 得先把字符串转化为int数组
	        	for(var i=0;i<msg.data.length;i++){
	        		var array1 = new Array();
	        		array1[0]=msg.data[i].key;
	        		array1[1]=parseInt(msg.data[i].value);
	        		array[i]=array1;
	        	}
        	    $('#jqChart').highcharts({
        	        chart: {
        	            plotBackgroundColor: null,
        	            plotBorderWidth: null,
        	            plotShadow: false
        	        },
        	        title: {
        	            text: '水质类别比例'
        	        },
        	        subtitle: {
	                    text: getTimeDuring(xzsd)+getStationName()+'水质站'+'水质类别比例'
	                },
        	        tooltip: {
        	    	    pointFormat: '类水{series.name}: <b>{point.percentage:.2f}%</b>'
        	        },
        	        plotOptions: {
        	            pie: {
        	                allowPointSelect: true,
        	                cursor: 'pointer',
        	                dataLabels: {
        	                    enabled: true,
        	                    color: '#000000',
        	                    connectorColor: '#000000',
        	                    format: '<b>{point.name}类水</b>: {point.percentage:.2f} %'
        	                }
        	            }
        	        },
        	        series: [{
        	            type: 'pie',
        	            name: '比例',
        	            data:array
        	        }]
        	    });
	        },
	        error: function(xHR, msg) {
	            ProcessAJAXError(JSON.parse(xHR.responseText));
	        }
	    });
	}
}

后台代码：

/**
	 * 1.水质类别比例 根据选择时段、选择测站查询水质站评价结果 结果根据水质类别进行汇总
	 */
	@Action(value = "getWQPercentageMap", className = "wqerStatisticsAction")
	public String getWQPercentageMap(){
		Map<String,Double> wqpercentageMap = new LinkedHashMap<String, Double>();
		List<KeyValueBean> list = new ArrayList<KeyValueBean>();
		wqersModel = this.getQueryParam(wqersModel);
		List<ZxDDbsszzpjjg> dbsszzpjjgList =  wqerStatisticsService.getWQPercentageList(wqersModel);
		wqpercentageMap = this.getWqpercentageMap(dbsszzpjjgList);
		Set<Map.Entry<String, Double>> entrySet=wqpercentageMap.entrySet();
		for (Map.Entry<String, Double> entry : entrySet) {
			KeyValueBean keyValueBean = new KeyValueBean();
			if(entry.getKey().equals("1 ")){
				keyValueBean.setKey("I");
			}else if(entry.getKey().equals("2 ")){
				keyValueBean.setKey("II");
			}else if(entry.getKey().equals("3 ")){
				keyValueBean.setKey("III");
			}else if(entry.getKey().equals("4 ")){
				keyValueBean.setKey("IV");
			}else if(entry.getKey().equals("5 ")){
				keyValueBean.setKey("V");
			}else if(entry.getKey().equals("6 ")){
				keyValueBean.setKey("劣V");
			}
			keyValueBean.setValue(entry.getValue());
			list.add(keyValueBean);
		}
		JsonConfig config = JsonUtil.getDealDateJsonConfig(DateUtil.Date_YMDHM);
		config = JsonUtil.getDealDoubleNullJsonConfig(config);
		jsonStr=JSONArray.fromObject(list, config).toString();
		jsonStr = JsonUtil.createSuccessJson(jsonStr, (list==null?0:list.size()));
		return BaseConstants.JSON;
	}

图片展示：

折线图js代码：

//2.项目时间变化趋势 根据选择时段、选择测站、选择项目查询9张项目数据表 返回List<PtTrendModel>  显示点值 
function getProjectTimeTrend(){
	var xzsd =document.getElementById("wqersModel.xzsd").value;
	var xzzd =document.getElementById("wqersModel.xzzd").value;
	var xzxm =document.getElementById("jcxm").value;
	if(xzsd!=null&&xzsd!=""&&xzzd!=null&&xzzd!=""&&xzxm!=null&&xzxm!=""){
		var strPara = {'wqersModel.xzsd':xzsd,'wqersModel.xzzd':xzzd,'wqersModel.xzxm':xzxm,};
		$.ajax({
	        type: "POST",
	        url:'<%=basePath%>wqerstatistics/getProjectTimeTrend1.action',
	        data: strPara,
	        success: function(msg) {
	        	var msg = eval("("+msg+")");
	        	var xmzhi = msg.data[0].xmzhi;
	        	var array = new Array();
	        	for(var i=0;i<xmzhi.length;i++){
	        		array[i] = parseFloat(xmzhi[i]);
	        	}
	        	$('#jqChart').highcharts({
	                title: {
	                	text: '项目时间变化趋势'
	                },
	                subtitle: {
	                    text: getTimeDuring(xzsd)+getStationName()+'水质站'+getXmmc(xzxm)+'项目时间变化趋势'
	                },
	                xAxis: {
	                	categories:msg.data[0].spt
	                },
	                yAxis: {
	                    title: {
	                        text: getXmmc(xzxm)+'项目值'+getDw(xzxm)
	                    },
	                    plotLines: [{
	                        value: 0,
	                        width: 1,
	                        color: '#808080'
	                    }]
	                },
// 	                tooltip: {
// 	                    valueSuffix: ''
// 	                },
	                tooltip: {
	                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
	                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
	                        '<td style="padding:0"><b>{point.y:.2f}</b>'+getDw(xzxm)+'</td></tr>',
	                    footerFormat: '</table>',
	                    shared: true,
	                    useHTML: true
	                },
	                legend: {
// 	                    layout: 'vertical',
// 	                    align: 'right',
// 	                    verticalAlign: 'middle',
// 	                    borderWidth: 0
	                },
	                series: [{
	                    name: getXmmc(xzxm)+'项目值',
	                    data:array
// 	                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
	                }]
	            });
	        },
	        error: function(xHR, msg) {
	            ProcessAJAXError(JSON.parse(xHR.responseText));
	        }
	    });
	}
}

后台代码：

/**
	 * 2.项目时间变化趋势 根据选择时段、选择测站、选择项目查询9张项目数据表 返回List<PtTrendModel>
	 */
	@Action(value = "getProjectTimeTrend1", className = "wqerStatisticsAction")
	public String getProjectTimeTrend1(){
		Map<String,List<Object>> xmAndSptmap = new LinkedHashMap<String, List<Object>>();
		List<Object> xmzhilist = new ArrayList<Object>();
		List<Object> sptlist = new ArrayList<Object>();
		wqersModel = this.getQueryParam(wqersModel);
		wqersModel.setXmtable(this.getXmTabel(wqersModel));
		List<Object> objList = wqerStatisticsService.getProjectTimeTrend(wqersModel);
		for(Object obj:objList){
			PtTrendModel pttm = new PtTrendModel();
			pttm = this.getPtTrendModel(obj, wqersModel, pttm);
			xmzhilist.add(pttm.getXmzhi());
			sptlist.add(pttm.getSpt());
		}
		xmAndSptmap.put("xmzhi", xmzhilist);
		xmAndSptmap.put("spt", sptlist);
		JsonConfig config = JsonUtil.getDealDateJsonConfig(DateUtil.Date_YMDHM);
		jsonStr=JSONArray.fromObject(xmAndSptmap, config).toString();
		jsonStr = JsonUtil.createSuccessJson(jsonStr, (xmAndSptmap==null?0:xmAndSptmap.size()));
		return BaseConstants.JSON;
	}

成果展示：

柱状图js代码：

//3.断面水质沿程变化趋势 根据选择时段、选择项目查询9张项目数据表 返回List<VrTrendModel>
function getVariationTrend(){
	var xzsd =document.getElementById("wqersModel.xzsd").value;
	var xzxm =document.getElementById("jcxm").value;
	if(xzsd!=null&&xzsd!=""&&xzxm!=null&&xzxm!=""){
		var strPara = {'wqersModel.xzsd':xzsd,'wqersModel.xzxm':xzxm,};
		$.ajax({
	        type: "POST",
	        url:'<%=basePath%>wqerstatistics/getVariationTrend1.action',
	        data: strPara,
	        success: function(msg) {
	        	var msg = eval("("+msg+")");
	        	var average = msg.data[0].average;
	        	var array = new Array();
	        	for(var i=0;i<average.length;i++){
	        		array[i] = parseFloat(average[i]);
	        	}
	        	$('#jqChart').highcharts({
	                chart: {
	                    type: 'column'
	                },
	                title: {
	                	text: '断面水质沿程变化趋势图'
	                },
	                subtitle: {
	                    text: getTimeDuring(xzsd)+getXmmc(xzxm)+'沿程变化趋势图'
	                },
	                xAxis: {
	                    categories: msg.data[0].szcz,
	                    tickInterval: 2,
// 	                    labels: {
// 	                    	step: stepvalue,
// 	                    	staggerLines: 1
//                     	}
	                },
	                yAxis: {
	                    min: 0,
	                    title: {
	                        text: getXmmc(xzxm)+'平均值'+getDw(xzxm),
	                    }
	                },
	                tooltip: {
	                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
	                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
	                        '<td style="padding:0"><b>{point.y:.2f}</b>'+getDw(xzxm)+'</td></tr>',
	                    footerFormat: '</table>',
	                    shared: true,
	                    useHTML: true
	                },
	                plotOptions: {
	                    column: {
	                        pointPadding: 0.1,
	                        borderWidth: 0,
	                      //设置柱子宽度
	                        pointWidth: 20 
	                    }
	                },
	                series: [{
	                    name: getXmmc(xzxm)+'平均值',
	                    data: array,
// 						data: [6.86, 6.91, 9.562, 14.521, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
	                }]
	            });
	        },
	        error: function(xHR, msg) {
	            ProcessAJAXError(JSON.parse(xHR.responseText));
	        }
	    });
	}
}

后台代码：

/**
	 * 3.断面水质沿程变化趋势 根据选择时段、选择项目查询9张项目数据表 返回List<VrTrendModel>
	 */
	@Action(value = "getVariationTrend1", className = "wqerStatisticsAction")
	public String getVariationTrend1(){
		Map<String,List<Object>> szczmap = new LinkedHashMap<String, List<Object>>();
		List<Object> dlist = new ArrayList<Object>();
		List<Object> slist = new ArrayList<Object>();
		wqersModel = this.getQueryParam(wqersModel);
		wqersModel.setXmtable(this.getXmTabel(wqersModel));
		List<Object[]> objList = wqerStatisticsService.getVariationTrend(wqersModel);
		for(Object[] obj:objList){
			String average = obj[0].toString();
			dlist.add(Double.valueOf(average).doubleValue());
			Map<String,String> allSzjczMap = szjczjbxxService.getAllSzjczMap();
			slist.add(allSzjczMap.get(obj[1].toString()));
		}
		szczmap.put("average", dlist);
		szczmap.put("szcz", slist);
		JsonConfig config = JsonUtil.getDealDateJsonConfig(DateUtil.Date_YMDHM);
		jsonStr=JSONArray.fromObject(szczmap, config).toString();
		jsonStr = JsonUtil.createSuccessJson(jsonStr, (szczmap==null?0:szczmap.size()));
		return BaseConstants.JSON;
	}

成果展示：