`
xiahyoha
  • 浏览: 6889 次
  • 性别: Icon_minigender_2
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

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","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();

	}
分享到:
评论

相关推荐

    FusionCharts.js

    接下来,使用JavaScript代码初始化图表,指定图表类型、宽度、高度、数据源等参数。例如: ```html &lt;!DOCTYPE html&gt; &lt;script src="path/to/fusioncharts.js"&gt; &lt;div id="chartContainer"&gt;&lt;/div&gt; var chart ...

    fusioncharts

    5. **fusioncharts.php**:这是一个PHP文件,很可能包含了与FusionCharts相关的初始化、数据处理和图表配置的代码。它可能调用了FusionCharts的PHP类库,或者直接生成JSON或XML数据供JavaScript使用。 6. **new...

    FusionCharts的Javascript和SWF文件

    - **初始化图表**:JavaScript代码负责加载SWF文件并初始化图表,设置图表的属性如标题、数据源、图表类型等。 - **数据绑定**:JavaScript可以将动态数据绑定到图表上,使图表实时更新。 - **事件处理**:通过...

    FusionCharts_demo.zip

    在FusionCharts的示例中,jQuery可能用于处理页面元素的加载、事件绑定、数据获取等工作,使得图表的初始化和更新更加便捷。 2. **fusionCharts.js**:这是FusionCharts的主要JavaScript库,包含了创建、配置和操作...

    FusionCharts帮助文档

    3. 初始化图表:创建一个HTML元素作为图表容器,并通过JavaScript代码初始化图表,设置图表类型、数据源等参数。 三、图表类型 1. 柱状图:用于比较不同类别的数量或值。 2. 饼图:展示各部分占整体的比例。 3. ...

    Asp.net FusionCharts 示范代码演示

    5. **初始化FusionCharts**:在客户端JavaScript中,使用`FusionCharts()`函数初始化图表,传入图表类型和数据源(即XML数据字符串)。 6. **在网页上显示**:将初始化后的FusionCharts对象嵌入到HTML中,通常是在...

    FusionCharts示例代码(jsp)

    &lt;script type="text/javascript" src="js/fusioncharts.js"&gt; &lt;link rel="stylesheet" href="css/fusioncharts.css" /&gt; ``` 三、创建图表 创建FusionCharts图表分为几个步骤: 1. 初始化图表:使用`FusionCharts`...

    简单的jsp fusioncharts例子

    3. **初始化FusionCharts对象**: 在HTML元素中,使用`FusionCharts`构造函数来实例化图表。你需要提供图表ID、类型以及XML数据源。 ```javascript var chart = new FusionCharts("Column2D", "myChartId", "400",...

    FusionCharts 图形报表展示

    2. **创建图表对象**:使用`new FusionCharts()`构造函数初始化图表对象,指定图表类型、宽度、高度及数据源等参数。 3. **渲染图表**:调用`render()`方法将图表渲染到指定的HTML元素中。 4. **数据绑定**:可以...

    FusionCharts在Android上的实现

    - 创建一个HTML文件,其中包含用于初始化FusionCharts的JavaScript代码。在这个HTML文件中,你需要指定图表类型、数据源、图表属性等。例如,你可以使用`&lt;script&gt;`标签来引用FusionCharts的JavaScript库,并在其中...

    FusionCharts完整资料集

    这些实例涵盖了如何初始化图表、设置图表属性、加载数据源以及实现图表交互等关键步骤,对于初学者来说是很好的学习资源。 ### 3. XML数据源生成 在FusionCharts中,数据通常以XML或JSON格式提供。"FusionCharts的...

    FusionCharts相关资源文件

    JavaScript库如`FusionCharts.js`负责与.FSW文件进行通信,处理数据绑定、事件监听、图表初始化和更新等功能。JavaScript文件通常包含API调用,允许开发者通过简单的代码创建、配置和控制图表。它们也包含对不同图表...

    Fusioncharts3.2

    2. **FusionCharts JavaScript类**:FusionCharts.js是库的核心文件,负责图表的初始化和交互。同样,这个文件也需要放在/web/FusionCharts/目录下。 3. **FusionCharts Export Handlers(服务器端)**:这些是处理...

    FusionCharts柱状图_jsp

    - 创建一个JavaScript对象,初始化FusionCharts实例,指定图表类型、宽度、高度、数据源等参数。 - 在JSP中动态生成XML或JSON数据,这通常涉及JavaBeans或其他数据模型来填充数据。 - 将生成的数据绑定到...

    FusionCharts free使用手册

    创建一个FusionCharts图表的基本步骤包括:初始化图表对象、定义图表类型、设置图表属性和数据源。 3. **图表类型** FusionCharts支持多种图表类型,如折线图、柱状图、饼图、散点图、仪表盘等。每种图表类型都有...

    FusionCharts For Asp.net

    在页面加载事件中,可以初始化控件并设置任何其他特定属性,如图表标题、图例等。例如: ```csharp protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { chart1.ChartTitle.Text = ...

    FusionCharts

    FusionCharts 是一款强大的数据可视化工具,它通过集成 Adobe Flash 技术,能够创建交互式、丰富多彩的图表,适用于网页和 Web 应用程序。这款产品以其出色的视觉效果和高效的数据呈现能力,被广泛应用于商业智能、...

    fusioncharts的使用和实例

    ### 初始化图表 创建一个FusionCharts实例,需要指定图表类型、宽度、高度以及数据源。例如,创建一个简单的饼图: ```javascript var chart = new FusionCharts({ type: "pie3d", renderAt: "chart-container",...

    fusioncharts导出到excel示例

    1. **配置FusionCharts**:在你的HTML页面中引入FusionCharts的JavaScript库,并初始化一个图表实例。确保设置`exportAtClient="false"`,这样导出请求会发送到服务器而不是客户端。 ```html &lt;script src="path/to/...

Global site tag (gtag.js) - Google Analytics