新版本的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, Xdata, Ydata, Yname, Ycolor, chartAttrs, dataSetAttrs, null, null,null,78);
		initCombineColumAndArea("${root}", "container1", 1000, 300, Xdata, Ydata, Yname, Ycolor, chartAttrs, dataSetAttrs, null, null,null,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在線測試