新版本的fusionchatrs XML格式的实现

以前的fusionchatrs 采用的是flash的方式去实现，但是现在许多浏览器即将不再支持flash.fusionchatrs 官网的例子已经是采用json格式来实现。本文是介绍xml实现的方式：

首先，是引入js

<script language="JavaScript" src='${root}/common/js/fusioncharts-n-xt/js/fusioncharts.js'></script>

之后的工具类

/**
* 柱状图和区域图的结合
* Xdata：a;b;c
* Ydata：a1;b1;c1|a2;b2;c2
* Yname: name1|name2
* Ycolor:color1|color2
* plotSpacePercent(数值范围：0~80) 可以，80最小，0最大，超出范围数值无效
* showPlotBorder='0/1'(是否显示柱子的边框)
* usePlotGradientColor 是否柱体渐变色
* valuePosition 值的位置(ABOVE/BELOW/AUTO,上下自动)
* showBorder 画布是否显示边框
* showToolTip 悬浮框是否显示提示
* valuePosition='ABOVE' value的显示位置ABOVE/BELOW/AUTO
*/

function initCombineColumAndArea(root,containerId,width,height,Xdata,Ydata,Yname,Ycolor,chartAttrs,dataSetAttrs,trendLines,styles,dataLink,plotspace)
	{
		var xml = "<chart  baseFontSize='12' baseFont='宋体'  caption='' xAxisName='' showBorder='0' showToolTip='0'  plotSpacePercent='"+plotspace+"' showPlotBorder='0' usePlotGradientColor='0' formatNumberScale='0' yAxisName='' canvasBgalpha='0' showValues='1' numberPrefix='' "+(chartAttrs==null?"":chartAttrs)+">";
		xml += "<categories>";
		var Xdatas = delLastCharIfExist(Xdata,";").split(";");
		for(var i=0; i<Xdatas.length; i++)
		{
			xml += "<category label='"+Xdatas[i]+"'/>";
		}
		xml += "</categories>";
		
		var Ydatas = Ydata.split("|");
		var Ynames = Yname.split("|");
		var Ycolors = Ycolor.split("|");
		var dataSetAttRSS=dataSetAttrs.split("|");
		//var setLinks = dataLink==null?null:delLastCharIfExist(dataLink,";").split("|");
		var setLinks =dataLink==null?null:dataLink.split("|");
		for(var i=0; i<Ydatas.length; i++)
		{
			var Yset = Ydatas[i].split(";");
			xml += "<dataset seriesName='"+Ynames[i]+"'   color='"+Ycolors[i]+"'  "+(dataSetAttRSS[i]==null?"":dataSetAttRSS[i])+">";
			for(var j=0; j<Yset.length; j++)
			{
				xml += "<set value=\""+Yset[j]+"\"  link=\""+(setLinks==null?"":setLinks[j])+"\" />";
				//xml += "<set value='"+Yset[j]+"' link='"+(setLinks==null?"":setLinks[j])+"'/>";
				//xml += "<set value='"+Yset[j]+"' link='JavaScript:alert(\'1\');'/>";
			}
			xml += "</dataset>";
		}
		if(trendLines != null)
		{
			xml += trendLines;
		}
		if(styles != null)
		{
			xml += styles;
		}
		xml += "</chart>";
		var chart = new FusionCharts({type: 'mscombi2d',renderAt:containerId,width:width,height:height,dataFormat: 'xml'});
		chart.setXMLData(xml);
		chart.render(containerId);
	}

这里的setXMLData()用于传入xm字符串。如果是引入外部的xml文件则chart.setXMLUrl()

前天的js代码

var Xdata="a;b;c;d;e;f;g";
		//总数20
		var Ydata='${Ydata}';
		var Yname="处于该状态量|完成该状态量";
		//var Ycolor="61bfad|e5e4e0|ff7900";
		var Ycolor="1DA389|f7b000";
		//var Ycolor="0075c2|1aaf5d";
		var dataSetAttrs="showValues='1' valuePosition='auto'  | renderas='area' showValues='1' Alpha='30'  valuePosition='BELOW' ";//柱形|区域的属性
		//showAlternateHGridColor    是否在横向网格带交替的颜色，默认为0(False)
		//showLegend 显示标题
		//canvasBorderColor  画布边框色  canvasBorderColor='#ffffff'
		//yAxisValuesstep='1' 
		//showXAxisLine 显示x轴
		//interactiveLegend lengend可点的？
		//valuePosition='ABOVE' value的显示位置ABOVE/BELOW/AUTO
		//Alpha
		var chartAttrs="bgColor='#ffffff' canvasBorderColor='#ffffff' showAlternateHGridColor='0' showXAxisLine='1' showYAxisLine='1'  showLegend='0' legendShadow='0'  interactiveLegend='0' ";//图形的属性
		//initStackedColumn2DLine("${root}","container1",1000,300,null,78);
		initCombineColumAndArea("${root}",78);
		

HTML代码

<div  id="container1" style="text-align:center;border:1px solid #ccc;border-bottom:none;padding:5px 5px 0px 5px;"></div>

开发过程中，可以参考官网的例子进行开发。

http://www.fusioncharts.com/javascript-chart-fiddles/?charts

图2在线测试