`
步青龙
  • 浏览: 298130 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
博客专栏
72ba33fb-eefe-3de1-bd65-82a6e579265d
Java面试
浏览量：0
社区版块
存档分类
最新评论

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>

 

 

分享到：
| 关于POI的一些备注
评论
1 楼 liu_zheng_wu 2013-08-28  
楼主， } else { 
                newDataSet += "<set value='" + setValues[i] + "'/>"; 
            } 
        } 
        return newDataSet;
最后这个else判断中还缺少条件，应改为：
} else { 
            if (setNames != null) { 
                    newDataSet += "<set name = '" + setNames[i] + "' value='" + setValues[i] + "'/>"; 
                } else{ 
                newDataSet += "<set value='" + setValues[i] + "'/>"; 
                } 
            } 
        } 
        return newDataSet;
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    FusionCharts_java后台工具

    本项目主要关注的是如何在Java后端与FusionCharts结合，通过JavaBean实体类、Action类以及JSP页面来实现图表数据的处理和展示。 首先，`FusionCharts_java后台`指的是利用Java技术搭建后端服务，以支持FusionCharts...

    FusionCharts柱状图_jsp

    【FusionCharts柱状图_jsp】是一个关于在Java服务器页面（JSP）中使用FusionCharts库创建柱状图表的实例源代码。FusionCharts是一款强大的JavaScript图表库，能够帮助开发者生成交互式、视觉吸引人的图表。在这个...

    FusionCharts_Evaluation报表工具

    1. **图表类型**: FusionCharts支持多种图表类型，如柱状图、折线图、饼图、散点图、热力图、甘特图等，覆盖了数据分析的各个领域。这些图表不仅视觉效果出众，还支持自定义样式和颜色，以适应不同的设计需求。 2. ...

    fusioncharts+报表工具

    开发者可以通过编程方式动态生成XML数据，然后直接传递给Fusioncharts，实现图表的实时更新。 #### 九、FusionCharts的优缺点 1. **优点**： - 支持多种图表类型。 - 高度可定制化，能够满足各种视觉需求。 - ...

    java fusionCharts 报表

    Java与FusionCharts报表开发是将Java编程语言与FusionCharts报表工具相结合，用于创建交互式、视觉吸引力强的数据可视化应用。FusionCharts是一款JavaScript图表库，它支持超过90种图表类型，如柱状图、饼图、线图、...

    FusionCharts 甘特图制作案例

    在IT领域，FusionCharts是一款强大的JavaScript图表库，它提供了丰富的图表类型，包括甘特图。甘特图是一种常用于项目管理和任务调度的图形表示工具，可以清晰地展示任务的开始时间、结束时间以及进度。在这个...

    FusionCharts图表工具的技术参数

    根据给定的文件信息，以下是对FusionCharts图表工具技术参数的详细解析： ### FusionCharts套件技术参数概览 FusionCharts是一套强大的图表工具，由广州虹科电子科技有限公司提供，旨在帮助用户轻松创建动态且交互...

    FusionCharts教程

    通过结合后端数据接口，可以实现动态数据更新，为用户提供实时的可视化信息。 综上所述，FusionCharts是构建高质量数据可视化的强大工具，无论你是Web开发者还是数据分析师，都能通过本教程快速掌握其核心知识，...

    js实现图表-FusionCharts

    4. **JSP**：在Java环境中，JSP开发者可以通过FusionCharts的Java类库，结合Servlet或JSP页面来生成图表数据。 **三、图表类型及特性** 1. **多样化图表**：FusionCharts支持20+种不同类型的图表，满足各种数据分析...

    FusionCharts在Android上的实现

    在Android平台上实现FusionCharts，可以为移动应用提供生动的数据展示功能，帮助用户更好地理解和分析数据。以下将详细介绍FusionCharts在Android上的实现及其相关的知识点。 首先，要在Android应用中使用...

    FusionCharts

    `fusioncharts-suite-xt.zip`是FusionCharts的核心组件，包含了所有必要的JavaScript库、CSS样式表以及必要的图片资源。安装这个库后，我们可以轻松地在网页中集成FusionCharts，利用其强大的功能创建出各种动态图表...

    FusionCharts_XT_Evaluation

    **FusionCharts XT Evaluation** 是一个强大的数据可视化工具，专为开发者设计，便于构建互动式、丰富多彩的图表。它能够将结构化的数据，无论是JSON格式还是XML格式，转化为直观易懂的图形，如饼状图、条形图、折线...

    fusioncharts

    3. **饼状图的实现**：饼状图是一种常用的数据可视化工具，用于显示整体中的各个部分所占的比例。在FusionCharts中，通过设置数据集和图表属性可以创建饼状图。数据集包含各部分的值，而属性可以设定图例、颜色、...

    使用fusioncharts实现数据库的动态数据交互.zip

    标题中的“使用FusionCharts实现数据库的动态数据交互”指的是使用FusionCharts这款JavaScript图表库与数据库进行数据通信，以实现在网页上展示动态、实时的图表数据。FusionCharts是一款强大的图表解决方案，它提供...

    fusioncharts.dll文件

    FusionCharts是由FusionCharts公司开发的，它允许开发者通过简单的JavaScript或服务器端语言（如PHP、ASP.NET、Java等）来创建各种类型的图表，包括柱状图、饼图、线图、热力图以及更复杂的组合图表。这款产品广泛...

    FusionCharts详解使用

    ### FusionCharts详解使用 #### 一、FusionCharts概述 FusionCharts是一款强大...综上所述，FusionCharts不仅提供了一个直观易用的数据可视化工具，而且具有良好的兼容性和扩展性，非常适合用于Web应用中的数据展示。

    FusionCharts图表制作插件

    2. **动态效果**：FusionCharts的图表支持动态效果，如动画加载、实时更新和交互式操作。例如，用户可以通过鼠标悬停查看具体数据，或者通过点击饼图切片来突出显示相关部分。 3. **多语言支持**：为了满足全球用户...

    FusionCharts文档

    教程中还会涵盖各种图表类型（如柱状图、饼图、线图、散点图等）的创建方法，以及如何配置图表属性，实现个性化展示。此外，教程还会涉及数据源的处理，包括XML、JSON、以及服务器端数据的对接。 **2. FusionCharts...

    Fusioncharts导出图片所需jar包

    本文将详细讲解如何利用FusionCharts提供的`fcexporter.jar`和`fcexporthandler.jar`这两个关键的Java档案（JAR）文件来实现报表的图片导出功能。 首先，我们要理解`fcexporter.jar`和`fcexporthandler.jar`的作用...

Magicbox
Global site tag (gtag.js) - Google Analytics