java實現FusionCharts實時圖工具

FusionCharts強大無比,使用版本是FusionCharts3.2 (後面提供下載)破解版。web程序中無須jar包,

先看FusionChart如何獲取數據:最常用的是setDataXML 和 setDataURL

setDataXML 是接收xml字符串,根據字符串生成圖表信息,大多的圖表是需要後臺動態的獲取數據的,適合於實時圖表。

setDataURL 是接收xml路徑的字符串,如果後臺會生成xml文件,也是可以的,不適合實時圖表。如果是固定的圖表信息這個最適合。

所以setDataXML 比較實用,setDataJSON也一樣。

下面的工具類的目的是給Action提供使用,提供最基本的,最常規的屬性。如果是自定義很強,需要自己生成相應的xmldata,工具類通用了二十多種效果(可能還有,破解版的swf 不多)。

代碼還不完善,基本功能夠用了,單列和多列都可以使用,只需要改改相應的swf即可。

JSP中有一個自定義的圖表,xmldata直接寫在JSP裏面了。

自定義的圖表實現了很多非常規功能,如導出JPEG/JPG/PDF 導出進度條中文提示,導出按鈕中文。斷點的,數字和文字格式等,chart顯示的效果等,詳細用法在JSP中有註釋。

由於結構的屬性太多了,要查看裏面的屬性可以去FusionCharts_Evaluation\Code\ChartXSD\xxx.xsd等裏面查看有哪些標籤,哪些屬性,以及屬性類型等。

直接上代碼

 

chart:<category label='Jun' />       <vLine color='FF5904' thickness='2'/>

chart:<trendlines><line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>        </trendlines>


import java.util.Random;
/*
 *  圖表數據集合
 *  功能:組合數據,可自定義顏色,沒有自定義顏色前12個爲randomColor的順序,
 *       超過部分隨意選擇randomColor的一種顏色
 *  對於下面自定義很強的 需要自己生成xmldata
 *  set alpha = '50' 透明度爲50%  
 *  set dashed='1' 虛線狀態顯示
 *  set 對於Line  anchorSides='7' 顯示的點爲幾邊形   anchorRadius = '4' 形狀大小 
 *  set anchorBorderColor='A186BE' 點 的邊框顏色     anchorBgColor='8BBA00' 點的背景色
 *  set 中如果沒有value屬性 還是留有空間 只是沒顯示  空元素 
 */
public class DataSet {
	private String[] randomColor = new String[] { 
			"AFD8F8", "F6BD0F", "8BBA00","FF8E46","008E8E","D64646",
			"8E468E", "588526", "B3AA00","008ED6", "9D080D", "A186BE" };
	private String seriesName;  // 標示
	private String[] setNames; // 名稱
	private String[] setValues;// 值
	private String[] setColors;// 顏色
	private String[] setTooltexts;// 提示信息tooltext='信息:{br}xxx...'
	public String[] getSetNames() {
		return setNames;
	}
	public void setSetNames(String[] setNames) {
		this.setNames = setNames;
	}
	public String[] getSetColors() {
		return setColors;
	}
	public void setSetColors(String[] setColors) {
		this.setColors = setColors;
	}
	public String getSeriesName() {
		return seriesName;
	}
	public void setSeriesName(String seriesName) {
		this.seriesName = seriesName;
	}
	public String[] getSetValues() {
		return setValues;
	}
	public void setSetValues(String[] setValues) {
		this.setValues = setValues;
	}
	/*
	 * 多列數據組合
	 */
	public String createDataSet() {
		String dataSet = "<dataset seriesName='" + seriesName + "'>";
		dataSet+=createSets(dataSet,false);
		dataSet += "</dataset>";
		return dataSet;
	}
	/*
	 * 公用到普通的Column2D Column3D Line2D Line3D 等
	 */
	public String createSets(String dataSet,boolean boo) {
		String newDataSet = "";
		for (int i = 0; i < setValues.length; i++) {
			if (setColors != null) {
				if (setNames != null) {
					newDataSet += "<set name = '" + setNames[i] + "' value='" + setValues[i] + "' color = '" + setColors[i]+ "'/>";
				} else{
					if(boo){
						if(i>randomColor.length){
							int ai = new Random().nextInt(12);
							newDataSet += "<set value='" + setValues[i] + "' color = '" + randomColor[ai] + "'/>";
						}else{
							newDataSet += "<set value='" + setValues[i] + "' color = '" + setColors[i] + "'/>";
						}
						
					}else{
						newDataSet += "<set value='" + setValues[i] + "' color = '" + setColors[i] + "'/>";
					}
				}
			} else {
				newDataSet += "<set value='" + setValues[i] + "'/>";
			}
		}
		return newDataSet;
	}
}


 /*
 * 圖表工具
 * 功能:支持MS多列系列圖表,和單例系列圖標
 *  對於下面自定義很強的 需要自己生成xmldata
 *  chart   x軸下標題文字  labelDisplay='Rotate'  垂直顯示  slantLabels='1'  45 度傾斜
 *  chart  x軸下標題文字  labelDisplay = "Stagger"  staggerLines='n' 顯示的行數 如果文字過長 就各行對應顯示
 *  chart  x軸下標題文字  labelStep='n' 文字每隔幾個一顯示 
 *  chart   x軸 上的柱頂部固定的文字值 rotateValues='1' 垂直顯示
 *  chart connectNullData='1' 對於Line,跳過空元素直接與下一個節點連接    
    			// lineDashGap='6' 虛線顯示空元素的連接  需要程序處理上一個節點爲dashed='1'
 *  chart lineDashGap = '5' 虛線的點的間隔
 *  chart decimals='2' 小數點後2位數  其他類似   對於數據差距比較很小(最大值最小值最少相差在1之內) 適用
    	        //  如果想讓柱狀的值顯示小數點後一位 forceDecimals='1' (Y軸顯示還是2位或者更多)
 *  chart  formatNumberScale='0' 顯示格式爲 234,344,679
 *  chart formatNumberScale='0'  formatNumber='0' 顯示格式爲原始格式
 */
public class Chart {
	private String caption;// 標題
	private String xAxisName;
	private String yAxisName;
	private String showValues;
	private String numberPrefix;
	private String[] categories;
	private DataSet[] dataset;
	private String lineStartValue;
	private String lineColor;
	private String lineDisplayValue;
	private String yAxisMinValue;
	private String yAxisMaxValue;

	public String getyAxisMinValue() {
		return yAxisMinValue;
	}

	public void setyAxisMinValue(String yAxisMinValue) {
		this.yAxisMinValue = yAxisMinValue;
	}

	public String getyAxisMaxValue() {
		return yAxisMaxValue;
	}

	public void setyAxisMaxValue(String yAxisMaxValue) {
		this.yAxisMaxValue = yAxisMaxValue;
	}

	public String getCaption() {
		return caption;
	}

	public void setCaption(String caption) {
		this.caption = caption;
	}

	public String getxAxisName() {
		return xAxisName;
	}

	public void setxAxisName(String xAxisName) {
		this.xAxisName = xAxisName;
	}

	public String getyAxisName() {
		return yAxisName;
	}

	public void setyAxisName(String yAxisName) {
		this.yAxisName = yAxisName;
	}

	public String getShowValues() {
		return showValues;
	}

	public void setShowValues(String showValues) {
		this.showValues = showValues;
	}

	public String getNumberPrefix() {
		return numberPrefix;
	}

	public void setNumberPrefix(String numberPrefix) {
		this.numberPrefix = numberPrefix;
	}

	public String[] getCategories() {
		return categories;
	}

	public void setCategories(String[] categories) {
		this.categories = categories;
	}

	public DataSet[] getDataset() {
		return dataset;
	}

	public void setDataset(DataSet[] dataset) {
		this.dataset = dataset;
	}

	public String getLineStartValue() {
		return lineStartValue;
	}

	public void setLineStartValue(String lineStartValue) {
		this.lineStartValue = lineStartValue;
	}

	public String getLineColor() {
		return lineColor;
	}

	public void setLineColor(String lineColor) {
		this.lineColor = lineColor;
	}

	public String getLineDisplayValue() {
		return lineDisplayValue;
	}

	public void setLineDisplayValue(String lineDisplayValue) {
		this.lineDisplayValue = lineDisplayValue;
	}
	/*
	 * MS 多列系列
	 */
	public String createChartXmlData() {
		String chartXmlData = "<chart useRoundEdges='1'  caption='" + caption + "' xAxisName='"
				+ xAxisName + "' yAxisName='" + yAxisName + "' showValues= '"
				+ showValues + "' numberPrefix='" + numberPrefix + "' "
				+ " yAxisMinValue = '" + yAxisMinValue + "' yAxisMaxValue = '"
				+ yAxisMaxValue + "'>";
		;
		chartXmlData += "<categories>";
		for (int i = 0; i < categories.length; i++) {
			chartXmlData += "<category label='" + categories[i] + "' />";
		}
		chartXmlData += "</categories>";
		for (int i = 0; i < dataset.length; i++) {
			chartXmlData += dataset[i].createDataSet();
		}
		chartXmlData += " <trendlines><line startValue='" + lineStartValue
				+ "' color='" + lineColor + "' displayValue='"
				+ lineDisplayValue + "'/></trendlines>";
		chartXmlData += "</chart>";
		return chartXmlData;
	}
	/*
	 * 單個圖標系列
	 */
	public String createRoutineChartXmlData() {
		String chartXmlData = "<graph  useRoundEdges='1'  caption='" + caption + "' xAxisName='"
				+ xAxisName + "' yAxisName='" + yAxisName + "' showValues= '"
				+ showValues + "' numberPrefix='" + numberPrefix + "' "
				+ " yAxisMinValue = '" + yAxisMinValue + "' yAxisMaxValue = '"
				+ yAxisMaxValue + "'>";
		chartXmlData += dataset[0].createSets("",true);
		chartXmlData += "</graph>";
		return chartXmlData;
	}
}


Action代碼:

	public void test() {//  隨時測試
		response.setCharacterEncoding("UTF-8");
		Chart chart = new Chart();
		chart.setCaption("圖表信息");
		chart.setxAxisName("月份");
		chart.setyAxisName("交易額");
		chart.setShowValues("0");
		chart.setNumberPrefix("$");
		String[] cs = { "1月", "2月", "3月", "4月", "5月" };
		chart.setCategories(cs);
		DataSet[] ds = new DataSet[3];// 三個進行對比
		for (int i = 0; i < ds.length; i++) {
			ds[i] = new DataSet(); // 對比五個月的數據
			ds[i].setSeriesName("200" + i + "年");
			int a1 = new Random().nextInt(1000);
			if (a1 <= 0) {
				a1 = 100;
			}
			int a2 = new Random().nextInt(1000);
			if (a2 <= 0) {
				a2 = 100;
			}
			int a3 = new Random().nextInt(1000);
			if (a3 <= 0) {
				a3 = 100;
			}
			int a4 = new Random().nextInt(1000);
			if (a4 <= 0) {
				a4 = 100;
			}
			int a5 = new Random().nextInt(1000);
			if (a5 <= 0) {
				a5 = 100;
			}
			String[] sv = { "" + a1, "" + a2, "" + a3, "" + a4, "" + a5 };
			ds[i].setSetValues(sv);
		}
		chart.setDataset(ds);
		chart.setLineStartValue("26000");
		chart.setLineColor("91C728");
		chart.setLineDisplayValue("Target");
		chart.setyAxisMinValue("0"); // 最小值
		chart.setyAxisMaxValue("1200");// 最大值
		String xmlDate = chart.createChartXmlData();

		PrintWriter pw;
		try {
			pw = response.getWriter();
			pw.print(xmlDate);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	public void test1() {
		response.setCharacterEncoding("UTF-8");
		Chart chart = new Chart();
		chart.setCaption("圖表信息");
		chart.setxAxisName("月份");
		chart.setyAxisName("交易額");
		chart.setShowValues("0");
		chart.setNumberPrefix("$");
		String[] cs = { "1月", "2月", "3月", "4月", "5月" };
		DataSet[] ds = new DataSet[1];// 三個進行對比
		ds[0] = new DataSet(); // 對比五個月的數據
		ds[0].setSeriesName("2000年");
		ds[0].setSetNames(cs);
		String[] sv = { "" + 190, "" + 334, "" + 799, "" + 888, "" + 900 };
		String[] sc = { "F6BD0F", "AFD8F8", "FF8E46", "008ED6", "A186BE" };
		ds[0].setSetColors(sc);
		ds[0].setSetValues(sv);
		chart.setDataset(ds);
		chart.setyAxisMinValue("0"); // 最小值
		chart.setyAxisMaxValue("1200");// 最大值
		String xmlDate = chart.createRoutineChartXmlData();
		PrintWriter pw;
		try {
			pw = response.getWriter();
			pw.print(xmlDate);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}


JSP如下

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>圖表Fusioncharts測試</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="chart/script/FusionCharts.js"></script>
 <script type="text/javascript" src="chart/script/FusionChartsExportComponent.js"></script>
 <script type="text/javascript">
    window.onload = function(){
    	//chart   x軸下標題文字  labelDisplay='Rotate'  垂直顯示  slantLabels='1'  45 度傾斜
    	//chart  x軸下標題文字  labelDisplay = "Stagger"  staggerLines='n' 顯示的行數 如果文字過長 就各行對應顯示
    	//chart  x軸下標題文字  labelStep='n' 文字每隔幾個一顯示 
    	// chart   x軸 上的柱頂部固定的文字值 rotateValues='1' 垂直顯示
    	// set alpha = '50' 透明度爲50%  
    	// set dashed='1' 虛線狀態顯示
    	// set 對於Line  anchorSides='7' 顯示的點爲幾邊形   anchorRadius = '4' 形狀大小 
    	// set anchorBorderColor='A186BE' 點 的邊框顏色     anchorBgColor='8BBA00' 點的背景色
    	// set 中如果沒有value屬性 還是留有空間 只是沒顯示  空元素 
    	// chart connectNullData='1' 對於Line,跳過空元素直接與下一個節點連接    
    			// lineDashGap='6' 虛線顯示空元素的連接  需要程序處理上一個節點爲dashed='1'
    	// chart lineDashGap = '5' 虛線的點的間隔
    	// chart decimals='2' 小數點後2位數  其他類似   對於數據差距比較很小(最大值最小值最少相差在1之內) 適用
    	        //  如果想讓柱狀的值顯示小數點後一位 forceDecimals='1' (Y軸顯示還是2位或者更多)
    	// chart  formatNumberScale='0' 顯示格式爲 234,344,679
    	// chart formatNumberScale='0'  formatNumber='0' 顯示格式爲原始格式
    	// chart  clickURL='n-http://www.baidu.com'  chart點擊打開百度 
		// chart toolTipBorderColor 提示的邊框顏色 toolTipBgColor 提示的背景色 
		// chart useRoundEdges = '1'  chart展示圓柱狀圖表 
		// chart exportHandler='fcExporter1'  chart指定client-side導出組件
		// 導出功能所需要的三件事情: 1 引入FusionChartsExportComponent.js 2 html中添加導出按鈕的div(id = 'xy')  3 並設置相應的屬性 exportAtClient = '1'支持客戶端導出 exportEnabled = '1' 可導出  4 chart指定exportHandler
		// chart  exportDialogMessage='已導出 ' 設置導出文件的時候百分比進度前的文字
    	var xx =  
    		"<chart  caption = '自定義圖表(點擊倒數第二個&右鍵導出)' bgColor='FF5904,FFFFFF' bgAlpha='100,100' bgRatio='0,100' bgAngle='0'"
    		+" staggerLines='3'  labelDisplay='Stagger' labelStep='1' "
    		+" rotateValues='1' canvasPadding='0' connectNullData='1' lineDashGap='5'"
    		+" decimals='2' formatNumberScale='0'  formatNumber='0' exportEnabled='1'"
    		+" toolTipBorderColor='D9E5F1' toolTipBgColor='D9E5F1' showToolTip='1'   useRoundEdges='1'"
			+" exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' exportDialogMessage='已導出 '>" 
    			+"<set label='John' value='42900'  tooltext = '第1個值爲{br}:420'/>"
    			+"<set label='Const' value='12345'  tooltext = '第2一個值爲:295'/>"
    			+"<set label='Ivy' value='52233'  tooltext = '第3個值爲:523'  dashed='1'/>" 
    			+"<set label='Pery'  />"
    			+"<set label='Erlang'  />"
    			+"<set label='Chuank'   />"
    			+"<set label='Sprone' value='42000'  alpha='50' dashed='1' tooltext = '第1個值爲{br}:420'/>"
    			+"<set label='July' value='2295'  tooltext = '第2一個值爲:295'/>"
    			+"<set label='Lim' value='52243'  tooltext = '第3個值爲:523'/>"
    			+"<set label='Joli' value='35679'  tooltext = '第1個值爲{br}:420'/>"
    			+"<set label='Boyka' link='JavaScript:myJS(\"Boyka\");' value='68420'  tooltext = '第2一個值爲:295'/>"
    			+"<set label='Abma'  link='JavaScript:myJS(\"Abma\");' value='52463'  tooltext = '第3個值爲:523'/>"
    			+"<set label='Lanbo' link='JavaScript:myJS(\"Lanbo\");'  value='49990'  tooltext = '第1個值爲{br}:420'/>"
    			+"<set label='Jim'  link='newchart-xml-jim-quarterly'  value='46999'  tooltext = '第2一個值爲:295' color='FF5906' />"
    			+"<set label='Chelios' value='49900'  tooltext = '"+"傑森·斯坦森 主要作品{br}"
    			+"▪ 巴西任務 ( 2013)	▪ 帕克 ( 2013){br}"
    			+"▪ 暫告安全 ( 2012)	▪ 玩命追蹤 ( 2012){br}"
    			+"▪ 波茨坦廣場 ( 2012)▪ 敢死隊2 ( 2012){br}"
    			+"▪ 鐵血精英 ( 2011)	▪ 機械師 ( 2010){br}"
    			+"▪ 死亡飛車2 ( 2010)▪ 敢死隊 ( 2010){br}▪ 怒火攻心2 高壓電"+"' color='FF5904' "
    			+" link='JavaScript:myJS(\"49900\");' anchorRadius='5' anchorSides='6' anchorBorderColor='A186BE' anchorBgColor='8BBA00'/>"
    		+" <linkeddata id='jim-quarterly'><chart caption='第一層轉向(點擊第二個進入)' subcaption='For the year 2004'    xAxisName='中國' yAxisName='GDP'>       <set label='Q1' value='11700'/>       <set label='Q2' link='newchart-xml-a-quarterly'  value='8600'/>       <set label='Q3' value='6900' />       <set label='Q4' value='10600' />"
                +"<linkeddata id='a-quarterly'><chart caption='第二層轉向' subcaption='浙江年度xx'    xAxisName='浙江' yAxisName='GPP'>       <set label='Q1' value='80'/>       <set label='Q2' value='50'/>       <set label='Q3' value='99' />       <set label='Q4' value='90' />    </chart>  </linkeddata></chart>  </linkeddata>"
    		+" <styles><style name='MyFirstBlur' type='Blur' blurX='6' blurY='6' /></styles></chart>";  
    		 // exportAtClient   exportEnabled='1'  加入fcexplorer.js   FusionChartsExportComponent.js
		 // FCExporter.swf 詳細可見Client_side explorting-simple example 
    		//  linkeddata 要轉向的圖的數據來源
    	   var myChart = new FusionCharts("chart/swf/Column2D.swf", "myChartId234", "300", "300");
		   myChart.setDataXML(xx);     
		   myChart.render("test");
		   
		   
		   var myExportComponent = new FusionChartsExportObject("fcExporter1", "chart/swf/FCExporter.swf");
            myExportComponent.componentAttributes.width = '400';
			myExportComponent.componentAttributes.height = '60';
			//Background color
			myExportComponent.componentAttributes.bgColor = 'ffffdd';
			//Border properties
			myExportComponent.componentAttributes.borderThickness = '2';
			myExportComponent.componentAttributes.borderColor = '0372AB';
			//Font properties
			myExportComponent.componentAttributes.fontFace = 'Arial';
			myExportComponent.componentAttributes.fontColor = '0372AB';
			myExportComponent.componentAttributes.fontSize = '9';
			myExportComponent.componentAttributes.btnWidth = '30';
			myExportComponent.componentAttributes.btnHeight= '20';
			myExportComponent.componentAttributes.btnColor = 'E1f5ff';
			myExportComponent.componentAttributes.btnBorderColor = '0372AB';
			//Button font properties
			myExportComponent.componentAttributes.btnFontFace = 'Verdana';
			myExportComponent.componentAttributes.btnFontColor = '0372AB';
			myExportComponent.componentAttributes.btnFontSize = '15';
	        myExportComponent.componentAttributes.btnsavetitle = '保存'
		    myExportComponent.componentAttributes.btndisabledtitle = '導出請點擊右鍵...'; 
            myExportComponent.Render("fce");//
		   //用configureLink可以指定不行形態的圖表展現, 會替代掉原有的linkeddata 
		   // 如果只有一個的話,可用下面,如果不是一種的話,下面代碼不寫。
		   /*
		    FusionCharts("myChartId234").configureLink ( 
		   {    
			  swfUrl : "chart/swf/Pie3D.swf",
				overlayButton:{
					    	message: '返回',
					    	fontColor : '880000',
					    	bgColor:'FFEEEE',
					    	borderColor: '660000'
				}
		   }, 0);
		   */
    }
    // 激發事件
    function myJS(myVar){
    	window.alert(myVar);
    }
	$.ajax({
		   type: "POST", 
		   url: "stat!test.action", //請求的action
		   success: function(data){ //結果  MSColumn2D  MSColumn3D  MSLine
			   var myChart = new FusionCharts("chart/swf/MSColumn2D.swf", "myChartId1", "300", "300");
			   myChart.setDataXML(data);      
			   myChart.render("chartDiv1");
			   
			   
			   myChart = new FusionCharts("chart/swf/MSColumn3D.swf", "myChartId2", "300", "300");
			   myChart.setDataXML(data);      
			   myChart.render("chartDiv2");
			   
			   myChart = new FusionCharts("chart/swf/MSLine.swf", "myChartId3", "300", "300");
			   myChart.setDataXML(data);      
			   myChart.render("chartDiv3");
			   
			   myChart = new FusionCharts("chart/swf/MSArea.swf", "myChartId3_1", "300", "300");
			   myChart.setDataXML(data);      
			   myChart.render("chartDiv3_1");
			   
			   myChart = new FusionCharts("chart/swf/MSCombi2D.swf", "myChartId3_2", "300", "300");
			   myChart.setDataXML(data);      
			   myChart.render("chartDiv3_2");
			   
			   //  純3D 效果 可轉動
			   myChart = new FusionCharts("chart/swf/MSColumnLine3D.swf", "myChartId3_3", "350", "350");
			   myChart.setDataXML(data);      
			   myChart.render("chartDiv3_3");
			   
			   myChart = new FusionCharts("chart/swf/Marimekko.swf", "myChartId3_4", "300", "300");
			   myChart.setDataXML(data);      
			   myChart.render("chartDiv3_4");
			      
			   myChart = new FusionCharts("chart/swf/MSCombi3D.swf", "myChartId3_5", "300", "300");
			   myChart.setDataXML(data);      
			   myChart.render("chartDiv3_5"); 
		   }
	});  
	 
	$.ajax({
		   type: "POST", 
		   url: "stat!test1.action", //請求的action
		   success: function(data){ //結果 Column2D Column3D Line Pie3D
			      var myChart = new FusionCharts("chart/swf/Column2D.swf", "myChartId4", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv4");
				  
				  myChart = new FusionCharts("chart/swf/Column3D.swf", "myChartId4", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv5");
				  
				  myChart = new FusionCharts("chart/swf/Line.swf", "myChartId6", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv6");
				  
				  myChart = new FusionCharts("chart/swf/Pie2D.swf", "myChartId7", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv7");
				  
				  
				  
				  myChart = new FusionCharts("chart/swf/Pie3D.swf", "myChartId8", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv8");
				  
					////////////////  其他效果
				  myChart = new FusionCharts("chart/swf/SSGrid.swf", "myChartId9", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv9");
				  
				  // 概率圖2D
				  myChart = new FusionCharts("chart/swf/Pareto2D.swf", "myChartId10", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv10");
				  
				  
				// 概率圖3D
				  myChart = new FusionCharts("chart/swf/Pareto3D.swf", "myChartId11", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv11");
				  
				 
				  myChart = new FusionCharts("chart/swf/Doughnut2D.swf", "myChartId12", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv12");
				
				   
				  myChart = new FusionCharts("chart/swf/Doughnut3D.swf", "myChartId13", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv13");
				 
				  myChart = new FusionCharts("chart/swf/Area2D.swf", "myChartId14", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv14");
				  
				  
				  myChart = new FusionCharts("chart/swf/Bar2D.swf", "myChartId15", "300", "300");
				  myChart.setDataXML(data);      
				  myChart.render("chartDiv15");
		   }
	});
	 
 </script>
</head>
<body>

	<table>
		<tr>
			<td><div id = "chartDiv1"></div></td>
			<td><div id = "chartDiv2"></div></td>
			<td><div id = "chartDiv3"></div></td>
		</tr>
		
		<tr>
			
			<td><div id = "chartDiv3_1"></div></td>
			<td><div id = "chartDiv3_2"></div></td>
			<td><div id = "chartDiv3_3"></div></td>
		</tr>
		
		<tr>
			
			<td><div id = "chartDiv3_4"></div></td>
			<td><div id = "chartDiv3_5"></div></td>
			<td><div id = "test"></div><div id = "fce"></div></td>
		</tr>
		 
		<!--  下面是單列的圖表 -->
		
		<tr>
			<td><div id = "chartDiv4"></div></td>
			<td><div id = "chartDiv5"></div></td>
			<td><div id = "chartDiv6"></div></td>
		</tr>
		
		<tr>
			<td><div id = "chartDiv7"></div></td>
			<td><div id = "chartDiv8"></div></td>
			<td><div id = "chartDiv9"></div></td>
		</tr>
		
		<tr>
			<td><div id = "chartDiv10"></div></td>
			<td><div id = "chartDiv11"></div></td>
			<td><div id = "chartDiv12"></div></td>
		</tr>
		
		<tr>
			<td><div id = "chartDiv13"></div></td>
			<td><div id = "chartDiv14"></div></td>
			<td><div id = "chartDiv15"></div></td>
		</tr>
	</table>
</body>
</html>

chart.zip
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章