fusioncharts js 方式初始化

最新推荐文章于 2019-07-11 13:30:52 发布

原创最新推荐文章于 2019-07-11 13:30:52 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #XML #jQuery #JavaScript #Microsoft #ViewUI

web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用原生Ajax方法与后台交互的方式，并利用返回的数据动态初始化多个FusionCharts图表的过程。通过实例展示了如何从后台获取XML配置并解析为图表数据。

与后台交互使用的是原生的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","4478b7");
			datasetElement.appendChild(setElement);	*/
			
			root.appendChild(setElement);
		}
		
		/*root.appendChild(categoriesElement);
		root.appendChild(datasetElement);*/
		
		doc.appendChild(root);
		OutputFormat of = new OutputFormat("XML", "UTF-8", false);
		of.setLineSeparator(null);
		of.setDoctype(null, null);
		StringWriter stringOut = new StringWriter();
		XMLSerializer serializer = new XMLSerializer(stringOut, of);
		try {
			serializer.serialize(doc);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return stringOut.toString();

	}