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