Open Flash Chart使用

最近项目中需要用图表展示数据，在网上找了个开源的组件Open Flash Chart 。利用Flash前端展现，支持多种图表，柱状图、饼图、线状图等。

1. 准备工作：

(1) 下载OpenFlashChart组件

下载最新2.x版本，解压缩后将open-flash-chart.swf文件放到项目里

(2) 下载swfobject.js，该文件可以帮你轻松将Flash嵌入到页面

(3) 下载Java辅助包jofc2，该包帮助生成OpenFlashChart展示需要的数据。下载后将jofc2-1.0-0.jar和它依赖的包xstream-1.3.1.jar拷贝到项目lib下

2. 前台代码

<div id="chart"></div>
<script type="javascript">
var dataUrl = base.host + "/XXXAction.do?"
+ "operate=XXX"
+ escape('&') + "param1=" + value1
+ escape('&') + "param2=" + value2;
swfobject.embedSWF("http://127.0.0.1/App/chart/open-flash-chart.swf",
"chart", "560", "325",
"9.0.0", "expressInstall.swf",
{"data-file": dataUrl}
);
</script>

说明：

(1) 通过div指定图表显示位置，因此div的id名称作为参数传入Flash组件。

(2) data-file参数指定图表数据来源，这里是一个Action，Action负责生成图表展示需要的数据

(3) data-file的URL参数连接符&，需要转义escape('&')，否则&后面的参数会被忽略，参数无法传到Action。

3. Action代码

/** 柱形图 */
public ActionForward createBar(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
// 接收查询参数
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");

// 获取数据
List listItem = find(param1, param2);

// 创建柱状图
BarChart chart = new BarChart(BarChart.Style.GLASS);
chart.setFontSize(12);
XAxis xAxis = new XAxis();
for (int i = 0; i < listItem.size(); i++) {
Item item = (Item) listItem.get(i);
// 设置柱状图的一个柱对应的横坐标Label
xAxis.addLabels(item.getName());
// 创建柱状图的一个柱
Bar bar = new Bar(item.getValue(), "0x336699");
// 提示信息，换行用<br/>
bar.setTooltip(item.getDesc());
// 将柱添加到柱状图
chart.addBars(bar);
}

// 创建图表
Chart flashChart = new Chart("XXX图", "font-size:15px;");
// 将柱状图添加到图表
flashChart.addElements(chart);
// 设置横坐标
flashChart.setXAxis(xAxis);
// 设置纵坐标
YAxis yAxis = new YAxis();
yAxis.setMax(100); // 设置纵坐标最大值
yAxis.setSteps(10); // 设置纵坐标刻度步长
flashChart.setYAxis(yAxis);
// 设置YLegend(不支持中文)
Text yLegend = new Text("used time/s");
yLegend.setStyle(Text.createStyle(15, "0x000000", Text.TEXT_ALIGN_LEFT));
flashChart.setYLegend(yLegend);

try {
// 设定输出流的编码为GBK
response.setContentType("text/json;charset=UTF-8");
response.getWriter().print(flashChart.toString());
} catch (Exception e) {
e.printStackTrace();
}

return null;
}

/** 饼图 */
public ActionForward createPie(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
// 接收查询参数
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");

// 获取数据
List listItem = find(param1, param2);

// 创建饼图
PieChart pie = new PieChart();
pie.setRadius(120);// 设置饼图半径大小
pie.setStartAngle(100); //设置角度
pie.setAnimate(true);
pie.setFontSize(12); // 设置字体大小
// 设置饼图各块的颜色
pie.setColours(new String[] { "0x336699", "0x88AACC", "0x999933",
"0x666699", "0xCC9933", "0x006666", "0x3399FF", "0x993300",
"0xAAAA77", "0x666666", "0xFFCC66", "0x6699CC", "0x663366",
"0x9999CC", "0xAAAAAA", "0x669999", "0xBBBB55", "0xCC6600",
"0x9999FF", "0x0066CC", "0x99CCCC", "0x999999", "0xFFCC00",
"0x009999", "0x99CC33", "0xFF9900", "0x999966", "0x66CCCC",
"0x339966", "0xCCCC33" });
// 设置提示信息
pie.setTooltip( "办理用时：#val# 秒<br>占百分比：#percent#");
// 创建饼图块
NumberFormat format = DecimalFormat.getPercentInstance();
for (int i = 0; i < listDetail.size(); i++) {
Item item = (Item) listItem.get(i);
// 创建饼图的一块
Slice slice = new Slice(item.getValue(), item.getName());
// 提示信息，换行用<br/>
slice.setTip(item.getDesc());
pie.addSlices(slice);
}

// 创建图表
Chart flashChart = new Chart("XXX图", "font-size:15px;" );
flashChart.addElements(pie);

try {
// 设定输出流的编码为GBK
response.setContentType("text/json;charset=UTF-8");
response.getWriter().print(flashChart.toString());
} catch (Exception e) {
e.printStackTrace();
}

return null;
}

参考资料：
http://www.ibm.com/developerworks/cn/opensource/os-cn-jofc2/ http://hi.baidu.com/harbin_sakura/blog/item/74a5b5198bfb954e42a9ad5f.html