FusionCharts Free 初体验

最新推荐文章于 2024-07-14 15:54:59 发布

HAPPY201409

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量86

点赞数

文章标签： javascript java 数据库 ViewUI

原文链接：http://www.cnblogs.com/hello_apple/archive/2010/11/24/1886371.html

版权

FusionCharts Free

测试环境

jsp + oracle

step 1: 从 http://www.fusioncharts.com/free/ 下载免费版本. 解压缩后提取 Charts 和 JSClass 两个文件夹. 复制到项目中.

　　　　Charts : 产生的 swf 文件样式;　　-- 选中其中之一放置项目即可

　　　　JSClass : js 文件;　　　　　　　　-- 必选

层次如下:

step 2: 动态设置数据文件 Data.xml

/**
	 * 创建 XML
	 * @param dataList 数据集合
	 * @param path 指定路径
	 * @throws IOException
	 * @throws JDOMException
	 */
	public void createXML(List dataList , String path) throws IOException, JDOMException {
		
		Element root = new Element("graph");
		
		root.setAttribute("caption", "值");
		root.setAttribute("xAxisName", "值");
		root.setAttribute("yAxisName", "值");
		root.setAttribute("showNames", "值");
		root.setAttribute("decimalPrecision", "值");
		root.setAttribute("formatNumberScale", "值");
		root.setAttribute("baseFontSize", "值");
		
		Document Doc = new Document(root);
		
		for (int i = 0; i < dataList .size(); i++) {
			
			数据类型 名称= (数据类型)dataList .get(i);
			
			Element tempElement = new Element("set");  
			
			tempElement.setAttribute("name", 名称.属性);
			tempElement.setAttribute("value", 名称.属性);
			
                                    // 随机颜色
		    Random random= new Random();
		    String r= Integer.toHexString(random.nextInt(255)).toUpperCase();
		    String g= Integer.toHexString(random.nextInt(255)).toUpperCase();
		    String b= Integer.toHexString(random.nextInt(255)).toUpperCase();
		    
		    tempElement.setAttribute("color", "#"+r+g+b);
		    		
			root.addContent(tempElement);
		}

	    XMLOutputter XMLOut = new XMLOutputter();    
	  
	    Format format = Format.getPrettyFormat();    
  
	    format.setEncoding("GB2312"); //设置xml文件的字符为gb2312, 防止乱码
  
	    format.setIndent(" "); //设置xml文件的缩进为4个空格    
  
	    XMLOut.setFormat(format);  
  
	    XMLOut.output(Doc, new FileOutputStream(path));
	}

step 3: 创建测试页面 test.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'ser.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
	<script language="JavaScript" src="chart/FusionCharts.js"></script>
	
	<link href="css/style.css" rel="stylesheet" type="text/css" >

	<script type="text/javascript">
		$(document).ready(function() {
	  	// do something here
			$.ajax({
				type:"POST", 
				url:"**********",   //请求路径 请求Action(继承DispatcherAction)中的login方法
				success: function(responseText){
	       //根据你所需要的图形类型选择不同的swf，如3d柱状图为FCF_Column3D.swf，2d饼状图为FCF_Pie2D.swf
				var chart = new FusionCharts("chart/FCF_Column3D.swf", "ChartId", "600", "350");
				chart.setDataURL("Data.xml");
				chart.render("chartdiv");
				}
			});
		});
	</script>

  </head>
  
  <body>
	
	<div id="chartdiv" align="center">FusionCharts.</div>
	
  </body>
</html>

step 4: 打开浏览器测试~

转载于:https://www.cnblogs.com/hello_apple/archive/2010/11/24/1886371.html

HAPPY201409

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FusionCharts Free 初体验

FusionCharts Free测试环境jsp + oraclestep 1: 从 http://www.fusioncharts.com/free/下载免费版本. 解压缩后提取 Charts 和 JSClass 两个文件夹. 复制到项目中. 　　　　Charts : 产生的 swf 文件样式;　　-- 选中其中之一放置项目...
复制链接

扫一扫