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", 10, "0xff00ff", "饼2");
		helper.addPieChart("p3", 10, "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", "线1", "0x00ffff");
		colunms.put("1", 100);
		colunms.put("2", 300);
		colunms.put("3", 100);

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

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

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

	}

}

饼图：http://blog.csdn.net/arjick/article/details/7011872

柱形图：http://blog.csdn.net/arjick/article/details/7012330

仪表盘：http://blog.csdn.net/arjick/article/details/7018354