在网上看到Open Flash Chart的效果,口水啊,正好要做图表,就想试用看看,jFreeChart的效果实在太差,唉,可能我代码写的不好的缘故吧,责任应该不在jFreeChart,呵呵。
中间费了多少事情就不说了,下面说说步骤:
下载jofc2,下载地址是http://code.google.com/p/jofc2/,这个是google对OFC做扩展的包,以前有个ofc4j的项目,不过好像已经Freeze了。
当然要下载OFC,我下载的是http://www.ofc2dz.com/上的,貌似原生的ofc不支持json格式的数据,而这个支持。
把文件open-flash-chart.swf放到网站根目录,然后把swfobject.js放到js目录,把jofc2的jar放到WEB-INF/lib,注意需要把依赖包也加入,在jofc的lib目录下。
下面就可以开始了,页面上的代码(我这里加了jQuery的库):
$(document).ready(function(){
$('#viewbtn').bind('click',function(){
var url = 'CategoryRankImg.do?year=' + $('#year').val();
swfobject.embedSWF("<s:url value="/open-flash-chart.swf"/>", "chart", "550", "300", "9.0.0",
"expressInstall.swf",
{"data-file":url});
});
});
然后,在action中,即可用jofc2的类了:
private Chart flashChart;
public String draw(){
PieChart c2 = new PieChart(); //饼图
List<CompanyProperty> list = cppSvr.find(0,0);
for(CompanyProperty cpp : list){
List results = bkSvr.findByNamedQuery("bk.qryCateRank", Integer.parseInt(year),cpp.getId());
Long cnt = (Long)results.get(0);
c2.addSlice(cnt==null?0:cnt, cpp.getName()); //增加一块
}
c2.setStartAngle(-90); //开始的角度
c2.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" });//饼图每块的颜色
c2.setTooltip("#val# / #total#<br>占百分之 #percent#\n 角度 = #radius#"); //鼠标移动上去后提示内容
flashChart = new Chart("企业性质排序"+year + "年"); //整个图的标题
flashChart.addElements(c2); //把饼图加入到图表
return Action.SUCCESS;
}
其实在输出flashChart对象的时候,是输入一串json数据,但我不知道是不是和struts2的json plugin能够合起来,所以我自己写了一个ActionResult:
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import jofc2.model.Chart;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.dispatcher.StrutsResultSupport;
import com.opensymphony.xwork2.ActionInvocation;
public class FlashChartResult extends StrutsResultSupport{
private static final String ENCODING = "UTF-8";
/**
*
*/
private static final long serialVersionUID = 4702848904993212381L;
@Override
protected void doExecute(String str, ActionInvocation inv)throws Exception {
Chart chart = (Chart) inv.getStack().findValue("flashChart");
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/json-rpc;charset=" + ENCODING);
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
response.setHeader("Pragma", "No-cache");
String json = chart.toString();
response.setContentLength(json.getBytes(ENCODING).length);
PrintWriter out = response.getWriter();
out.print(json);
out.flush();
out.close();
}
}
struts的配置内容:
<result-type name="ofc" class="com.nbrc.market.helper.FlashChartResult"></result-type>
……
<action name="PositionCateRank" class="PositionRankAction" method="query">
<result type="ofc"></result>
</action>
这样就大功告成了。
最后还要讲几句,这个jofc2的库源代码有,但是javadoc里很少有东西,所以写代码可能不太方便,需要慢慢摸索,我一天只做了饼图和条状图,条状图的代码:
public String query(){
if(marketId==null || marketId.equals("")){
return Action.NONE;
}
MarketPlan p = mrpSvr.findById(marketId);
planName = p.getTitle();
BarChart chart = new BarChart(BarChart.Style.GLASS);//设置条状图样式
Map<String, Long> result = rriSvr.getPositionCateRankByPlan(marketId,10);
long max = 0;//Y轴最大值
XAxis x = new XAxis();//X轴
for(String key:result.keySet()){
PositionCategory pc = pctSvr.findById(key);
Long tmp = result.get(key);
Bar bar = new Bar(tmp,pc.getPositionTitle()); //条标题,显示在x轴上
bar.setColour("0x336699"); //颜色
bar.setTooltip(pc.getPositionTitle()+"#val# 个岗位"); //鼠标移动上去后的提示
if(tmp>max){
max = tmp;
}
chart.addBars(bar);
x.addLabels(pc.getPositionTitle()); //x轴的文字
}
flashChart = new Chart();
flashChart.addElements(chart);
YAxis y = new YAxis(); //y轴
y.setMax(max+10.0); //y轴最大值
y.setSteps(max/10*1.0); //步进
flashChart.setYAxis(y);
flashChart.setXAxis(x);
return Action.SUCCESS;
}
最后还要注意,在传递参数的时候要把&符号转换成%26!切记切记,如
var url = 'SumCountChart.do?startTime=' + $('#startTime').val()+"%26endTime="+$('#endTime').val();
swfobject.embedSWF("<s:url value="/open-flash-chart.swf"/>", "chart", "550", "300", "9.0.0", "expressInstall.swf", {"data-file":url});
- 大小: 80.5 KB
分享到:
相关推荐
open flash chart库,用于php开发中图表的制作,很炫的说~
找了半天的open flash chart api没找到,最后终于找到了,希望对大家有用
Open Flash Chart,制作图表,柱状图,饼图,线点图,
Open Flash Chart(简称OFC),是一个开源的flash报表组件。我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。客户端在得到数据以后,在Flash Player中渲染出报表图。 附带PDF说明文档,是中文版...
第一步:下载Open Flash Chart工具最新软件包,将其中open-flash-chart.swf放到网站根目录,swfobject.js放到js目录下。如果是java项目,则还需将jofc2-1.0-0.jar和xstream-1.3.1.jar两个jar包加入项目。(xstream-...
包含一些页面和demo。各类常用图形的简单实现例子。
由于最近公司项目中要用到图表,看到Open Flash Chart这个还不错,开源的,而且官方还附带了很多Demo,最重要的是支持很多的语言,只是这个东西一直很久没有更新,在网上找了很多资料,找到了Open Flash Chart社区...
完整的open flash chart 。绝对完整。绝对可以看效果。 完整的open flash chart 。绝对完整。绝对可以看效果。
本实例在IE6、IE7、IE8、Chrome、Firefox测试通过,在实际项目使用中,对可能出现的问题,尤其在IE6中无法显示flash图表,本人特撰写《Flash图表组件——使用Open Flash Chart 2.0的一些问题及解决办法》,具体访问...
OpenFlashChart是一个开源的报表制作组件,该组件能够自动生成一个好看的、动态的flash报表; 该组件使用flash展示报表能够很好的做到与浏览器进行集成,目前浏览器基本都能很好的支持flash; 该组件还支持一些简单...
RCP Open Flash Chart 在Eclipse RCP中使用Open Flash Chart的例子
Open Flash Chart,制作图表,柱状图,饼图,线点图,Open Flash Chart的使用说明及参数的设定。
open-flash-chart2系列教程
帮助学习open_flash_chart,非常好的一个图标工具帮助文档
jfreechart and open flash chart整理jfreechart and open flash chart整理
open flash chart ,open flash chart ,flash 图表,open flash chart 1.9,java源代码
Open Flash Chart java例子 eclipse 测试通过 直接下载解压导入eclipse就OK了。
open flash chart 亲自测试 成功
open flash chart 亲自测试 成功
open flash chart 亲自测试 成功