SunshineCharts部署教程(最简单的flex Charts)

? 近来因为公司项目需要，并且因为开源的报表控件太多bug了，无法使用。所以简单封装了一个flexchart，使用更加简单，基本3分钟就可以上手使用，并且扩展性是好。该报表控件全开源欢迎有兴趣的朋友下载使用。? ? ? ?首先请下载sunshinecharts的包：

? ? ??http://ken-javaframeword.googlecode.com/files/SunshineCharts.war

? ?下载2.5.2的javaframework：

? ? ??http://ken-javaframeword.googlecode.com/files/javaFramework2_5_2.jar

? ??

? ??SunshineCharts.swf 报表的核心swf文件；

? ?chartsTag.tld 报表标签文件

? ??

? ?

? ? ?第一步：加入标签

? ? 在web.xml加入

? ?

<jsp-config>
		<taglib>
			<taglib-uri>/WEB-INF/chartsTagLib</taglib-uri>
			<taglib-location>/WEB-INF/tag/chartsTag.tld</taglib-location>
		</taglib>
	</jsp-config>

? ?其中

/WEB-INF/tag/chartsTag.tld

?问tld存放的路径；

? ?第二步：加入报表

? ? 在jsp头部加入

? ??

<%@taglib uri="/WEB-INF/chartsTagLib" prefix="chart"%>

? ?然后在jsp的body加入

?

<chart:flashTag  id="lineChart" type="lineChart"
			dataUrl="xml/LineChartData.xml" flashUrl="SunshineCharts.swf"
			cleanCache="off" width="100%" height="100%" />

? ?id：报表的id

? type：lineChart/pieChart/columnChart

? flashUrl:SunshineCharts.swf的路径

? dataUrl:数据源url的路径，数据源为xml

? cleanCache:是否自动清除缓存

? ??第三步：构造数据源

? ?我们在dataUrl传入一个一个LineChartData.xml

<?xml version="1.0" encoding="UTF-8"?>

<data title="" autoRefreshPolicy="on" autoRefreshTime="180" debug="off"
	backGroudColor="0xffffff" verticalTitle="price" horizontalTitle="date"
	form="curve" showDataTips="true" showAllDataTips="false"
	savePicturePolicy="on" savePicturePolicyName="test.jpg" legend="true">
	<lines>
		<line value="line1" label="线1" color="ox000000" />
	</lines>
	<node label="1" line1="100" />
	<node label="2" line1="0" />
	<node label="3" line1="100" />
</data>

? ? xml解析：

? ?title：标题

? ?autoRefreshPolicy：是否自动刷新

? ?autoRefreshTime：自动刷新时间

? ?debug：是否显示debug

? ??backGroudColor：底色

? ??verticalTitle：纵轴标签

? ?horizontalTitle：横轴标签

? ?form：线的样式

? ?showDataTips：是否交互显示

? ?showAllDataTips：显示所有标签

? ?savePicturePolicy：是否可以右键保存图片

? ?savePicturePolicyName：右键保存图片的名称

? ?legend：是否需要图例

? ?color：线的颜色

?效果图：

? ? ?另外的xml：

? ? ?

<?xml version="1.0" encoding="UTF-8"?>

<data title="" autoRefreshPolicy="on" autoRefreshTime="180" debug="off"
	backGroudColor="0xffffff" verticalTitle="price" horizontalTitle="date"
	form="curve" showDataTips="true" showAllDataTips="false" legend="true">
	<lines>
		<line value="line1" label="线1" color="0x00ffff" />
		<line value="line2" label="线2" color="0xffff00" />
	</lines>
	<node label="1" line1="100" line2="100" />
	<node label="2" line1="0" line2="300" />
	<node label="3" line1="100" line2="100" />
</data>

? ?结果图：

??

? ? 通过java代码构造xml：

? ? ?构造线图xml

? ??

package com.shine.framework.Charts.cofferCharts.LineCharts;

public class LineChartsExample {

	/**
	 * 生成线图例子
	 * 
	 * @param args
	 */
	public static void main(String[] args) {
		Line line1 = new Line("line1","线1","0x000000");
		line1.put("1",100);
		line1.put("3",100);

		LineChartsHelper helper = new LineChartsHelper();
		helper.addAix("1","2","3");
		helper.addLine(line1);

		System.out.println(helper.getDataXml());
	}

}

? ?构造饼图xml

package com.shine.framework.Charts.cofferCharts.PieCharts;

public class PieChartExample {

	/**
	 * 饼图使用例子
	 * 
	 * @param args
	 */
	public static void main(String[] args) {
		PieChartsHelper helper = new PieChartsHelper();
		helper.addPieChart("p1",10,"0xffff00","饼1");
		helper.addPieChart("p2","0xff00ff","饼2");
		helper.addPieChart("p3","0x00ffff","饼3");

		System.out.println(helper.getDataXml());
	}
}

? 构造柱图的xml

package com.shine.framework.Charts.cofferCharts.ColumnsCharts;

import com.shine.framework.Charts.cofferCharts.LineCharts.Line;
import com.shine.framework.Charts.cofferCharts.LineCharts.LineChartsHelper;

public class ColumnsChartsExample {

	/**
	 * 柱图例子
	 * 
	 * @param args
	 */
	public static void main(String[] args) {
		Colunms colunms = new Colunms("colunms1","0x00ffff");
		colunms.put("1",100);
		colunms.put("2",300);
		colunms.put("3",100);

		Colunms colunms1 = new Colunms("colunms2","0xffff00");
		colunms1.put("1",200);
		colunms1.put("3",500);

		ColumnsChartsHelper helper = new ColumnsChartsHelper();
		helper.addAix("1","3");
		helper.addColunms(colunms);
		helper.addColunms(colunms1);

		System.out.println(helper.getDataXml());

	}

}

饼图：http://www.voidcn.com/article/p-yaqxpbcd-bmh.html

柱形图：http://www.voidcn.com/article/p-rcoljiho-bmh.html

仪表盘：http://www.voidcn.com/article/p-egpiwlgw-bmh.html