在网上看到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
分享到:
相关推荐
- **Flash图表库**:Open Flash Chart是一款基于Adobe Flash技术的图表生成库,它通过SWF文件在网页中呈现图表。 - **JavaScript API**:与Flash交互的桥梁,通过JavaScript设置图表参数并控制图表行为。 2. **...
2. **引入库**:在PHP代码中引入Open Flash Chart的库文件,通常是`ofc_loader.php`。 3. **构建数据**:根据实际需求,创建PHP数组或对象,存储图表的数据和配置信息。 4. **生成图表**:调用Open Flash Chart的...
Open Flash Chart是一款强大的开源Flash图表库,用于在Web应用程序中创建高质量、互动的图表。它提供了丰富的自定义选项,能够生成各种类型的图表,包括柱状图、饼图、线点图等,使得数据可视化变得更加简单易行。在...
Open Flash Chart是一款强大的开源图表库,它使用Flash技术来创建美观、交互式的图表。这款工具在Web开发中尤其受欢迎,因为它允许开发者轻松地为网站添加数据可视化功能,而无需深入学习复杂的图形编程。以下是关于...
1. **引入库文件**:在HTML页面中引入Open Flash Chart的SWF文件和JavaScript接口文件。 2. **创建图表对象**:通过JavaScript创建一个图表对象,并设置其基本属性,如宽度、高度、标题、颜色方案等。 3. **添加...
- 在Open Flash Chart中,JSON数据通常包含一系列的数组或对象,每个元素对应图表的一条数据,包括值、颜色、标签等信息。 4. **使用步骤** - 首先,在HTML文件中引入Open Flash Chart的SWF文件,并设置图表的...
Open Flash Chart是一款强大的开源图表生成插件,常用于创建交互式、美观的图表,尤其适合在Web应用程序中显示数据。这个插件支持多种编程语言,包括ASP.NET,使得开发者能够轻松地将动态数据转化为视觉上吸引人的...
《Open Flash Chart:一款强大的Flash图表库》 Open Flash Chart是一...对于熟悉各种编程语言的开发者来说,通过压缩包中的库文件,可以快速集成Open Flash Chart到他们的项目中,提升用户体验,使数据更生动、易懂。
Open Flash Chart(简称OFC),是一个开源的flash报表组件。我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。客户端在得到数据以后,在Flash Player中渲染出报表图。 附带PDF说明文档,是中文版...
标签“源码”表明我们可以获取到Open Flash Chart的源代码,这对于开发者来说是一个巨大的优势。源代码的开放性使得用户可以深入理解其工作原理,根据需求进行定制,甚至扩展其功能。同时,源码的可用性也意味着社区...
第一步:下载Open Flash Chart工具最新软件包,将其中open-flash-chart.swf放到网站根目录,swfobject.js放到js目录下。如果是java项目,则还需将jofc2-1.0-0.jar和xstream-1.3.1.jar两个jar包加入项目。(xstream-...
这篇博文链接提供了一个关于Open Flash Chart的示例,虽然描述部分为空,但我们可以从标题和标签中推测出本文可能涉及到如何使用Open Flash Chart的源码以及它作为工具在实际项目中的应用。 首先,让我们了解一下...
Open Flash Chart是一款强大的开源Flash图表库,用于在Web应用程序中创建动态、交互式的图表。它使用ActionScript编写,可以通过服务器端的数据与JavaScript进行通信,从而生成高质量的图表。本示例是关于如何在Java...
Open Flash Chart是一款强大的开源Flash图表组件,用于创建各种复杂且美观的数据可视化效果。这款软件的最新版本2.0带来了更多的功能和改进,旨在为开发者提供更便捷、灵活的方式来展示数据。下面将详细介绍Open ...
**RCP Open Flash Chart**是将开源的Flash图表库Open Flash Chart集成到Eclipse Rich Client Platform (RCP) 应用程序中的一个实践案例。Eclipse RCP是一种强大的框架,用于构建桌面应用程序,而Open Flash Chart则...
由于最近公司项目中要用到图表,看到Open Flash Chart这个还不错,开源的,而且官方还附带了很多Demo,最重要的是支持很多的语言,只是这个东西一直很久没有更新,在网上找了很多资料,找到了Open Flash Chart社区...
通过阅读和运行这些示例,你可以更直观地了解Open Flash Chart的用法,并掌握如何在自己的项目中运用。 总结,Open Flash Chart 1.9是一个功能强大且易于使用的图表库,适用于需要高质量数据可视化的Web应用。通过...
Open Flash Chart 1.9.7 是一款高效且免费的网络报表设计工具,它以其强大的功能和易用性在开发者社区中赢得了广泛赞誉。这款软件的核心优势在于其快捷的性能和丰富的图表展示效果,使得即便是非专业程序员也能轻松...
本实例在IE6、IE7、IE8、Chrome、Firefox测试通过,在实际项目使用中,对可能出现的问题,尤其在IE6中无法显示flash图表,本人特撰写《Flash图表组件——使用Open Flash Chart 2.0的一些问题及解决办法》,具体访问...