日期:2014-05-16  浏览次数:20435 次

fusioncharts js 方式初始化

与后台交互使用的是原生的ajax方法,尝试过使用jquery提供的ajax,但是没有生效。

这种初始化方式可以初始化free版本和企业版本,已经测试过。

?

?

JS部分:

//初始化图表
			function getXmlHttp() {
				return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
			}
			function initChart(){
				var xmlhttp = getXmlHttp();
				 if (xmlhttp) {
					var chartUrl="${loadChartUrl}";
					xmlhttp.open("get", chartUrl, true);
					xmlhttp.onreadystatechange = function() {
						if (xmlhttp.readyState == 4) {
									
							if(xmlhttp.responseText == null || xmlhttp.responseText == '') {
								alert("与服务器失去连接");
								
							} else {
								//alert(xmlhttp.responseText);
								var xml=xmlhttp.responseText;
								var xml1=xml.split("$")[0];//这里使用$符号分割,可将后台传入的xml分割开,同时初始化多个chart
								var xml2=xml.split("$")[1];
								
								var chart1 = new FusionCharts("${ctx}/common/js/fusionCharts3.1/Charts/Column3D.swf", "ChartId", "400", "300","","");										
								chart1.setDataXML(xml1);
								chart1.render("chartdiv");

								var chart2 = new FusionCharts("${ctx}/common/js/fusionCharts3.1/Charts/MSColumn3D.swf", "ChartId", "600", "300","","");								
								chart2.setDataXML(xml2);
								chart2.render("MSColumn3DChartdiv");
							}
						}
					};
					xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
					xmlhttp.send();
					//setTimeout("getInfo12()",60000);	
				}
			}		

?后台代码:

?

//加载图表
	@RequestMapping(params ="action=loadChart")
	public void loadChart(RenderResponse renderResponse,Model model){
		
		//response.setCharacterEncoding("utf-8");

		List reslutList=auditWorkService.getAdtResultDistribution();//获得数据
		
		String xmlConfig = adtResultXmlConfigByType(reslutList,"审计结果分布(按规则类型)");
		xmlConfig=StringUtils.escapeXmlForJs(xmlConfig);
			
		try {
			renderResponse.setContentType("text/xml");
			PrintWriter out = renderResponse.getWriter();
			out.write(xmlConfig);
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
			logger.error(e.getMessage());
		}

	}
	
	//生成审计结果分布XML	
	private String adtResultXmlConfigByType(List reslutList ,String name) {
		

		Document doc = new DocumentImpl();
		Element root = doc.createElement("chart");

		String xAxisName = "x";
		String yAxisName = "审计结果数量";

		root.setAttribute("caption", name);
		root.setAttribute("decimalPrecision", "0");
		root.setAttribute("formatNumberScale", "0");
		root.setAttribute("showBorder", "0");
		
		//root.setAttribute("subcaption", xAxisName);
		root.setAttribute("useRoundEdges", "1");
		//root.setAttribute("lineColor", "83ADCD");
		root.setAttribute("baseFontSize", "12");//改变字体大小
		root.setAttribute("baseFont", "宋体");//改变字体大小
		root.setAttribute("canvasBgColor", "efefef");//设置背景色
		root.setAttribute("canvasBaseColor", "bebebe");//设置底座颜色
		root.setAttribute("yAxisName", yAxisName);//设置y轴名称
		//root.setAttribute("xAxisName",xAxisName );
		

		/*Element categoriesElement = doc.createElement("categories");
		
		Element datasetElement = doc.createElement("dataset");
		datasetElement.setAttribute("seriesname","问题数");
		datasetElement.setAttribute("showValue","1");
		datasetElement.setAttribute("color","4478b7");*/
		for(int i=0;i<reslutList.size();i++){
			Object[] row = (Object[])reslutList.get(i);
			String typeName="";
			
			
			/*Element categorieElement = doc.createElement("category");
			categorieElement.setAttribute("name",typeName);
			categorieElement.setAttribute("hoverText",typeName);
			categoriesElement.appendChild(categorieElement);*/
			
			Element setElement = doc.createElement("set");
			setElement.setAttribute("label",typeName);
			setElement.setAttribute("value",row[1].toString());	
			setElement.setAttribute("color","4478b7");
			//设置下钻函数传入规则类型
			setElement.setAttribute("link","JavaScript:showResultByRule("+row[0].toString()+");");
			/*datasetElement.setAttribute("color",