`
splinter_2
  • 浏览: 58942 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用Open Flash Chart(OFC)制作图表(Struts2处理)

 
阅读更多

Java开源项目中制作图表比较出色的就是JFreeChart了，相信大家都听说过，它不仅可以做出非常漂亮的柱状图，饼状图，折线图基本图形之外，还能制作甘特图，仪表盘等图表。在Web应用中可以为项目增色不少。JFreeChart技术成熟，完全是通过Java代码控制图表生成，掌握难度不大。但是它的一个缺点就是所有资源在服务器端生成，需要占用大量的服务器资源，而且图表以流的形式输送到客户端也占用了大量的网络资源。
    对于服务器资源和网络资源吃紧的项目还不得不想办法，虽然JFreeChart非常的华丽，但是还好有Open Flash Chart，制作简单的柱状图，饼状图和折线图足够用，而且Flash的展示效果绝不比JFreeChart的差。项目地址是：http://teethgrinder.co.uk/open-flash-chart/
    先说说Open Flash Chart的工作原理，不要看到Flash就害怕，OFC的开发包内就是一个flash文件，其实我们不需要改动原有的Flash，只需给Flash提供符合规范的数据即可。OFC所需的数据格式就是JSON，JSON不依赖于任何技术（Java，.NET和PHP都有生成JSON代码的工具），这就使得OFC更加Open。本文从Java角度出发，使用Struts2框架，来分析OFC的使用。
    GoogleCode社区的一款开源插件为Java开发者使用OFC提供了JSON生成的专用工具，那就是jofc2，我可以使用jofc2采用类似JFreeChart的方式来组织代码，大大提升开发效率。该项目的地址是：http://jofc2.googlecode.com
    项目按照Struts2的开发标准搭建，然后把OFC开发所需的flash文件，页面显示Flash的支持文件swfobject.js放到发布目录的相应位置，再将jofc2和其依赖的xstream的jar包放到WEB-INF/lib下并加入编译路径即可。
    有这样一个需求：记录系统访问用户所使用的浏览器并用图表显示。那么需要在数据库中记录这样的信息，如图所示：

    这里面记录了9种浏览器的系统访问量，现在我们要在页面中用OFC来显示它，首先对Struts2做配置。代码如下：

Java代码 复制代码 收藏代码
  1. package xxx.app.action.chart;   
  2. import java.util.ArrayList;   
  3. import java.util.List;   
  4. import java.util.Map;   
  5. import javax.servlet.http.HttpServletResponse;   
  6. import org.apache.struts2.ServletActionContext;   
  7. import jofc2.model.Chart;   
  8. import jofc2.model.axis.Label;   
  9. import jofc2.model.axis.XAxis;   
  10. import jofc2.model.axis.YAxis;   
  11. import jofc2.model.elements.LineChart;   
  12. import xxx.app.action.BaseAction;   
  13. public class OfcChartAction extends BaseAction {   
  14.     private Chart ofcChart;   
  15.     public Chart getOfcChart() {   
  16.         return ofcChart;   
  17.     }   
  18.     public String showChart() throws Exception{   
  19.         //y轴数据集合-使用数量   
  20.         List<Number> dataSet = new ArrayList<Number>();   
  21.         //x轴数据集合-浏览器类型   
  22.         List<Label> xLabel = new ArrayList<Label>();   
  23.         //获取需要显示的数据集   
  24.         List browserList = getServMgr().getVisitStatService().getBrowserStat();   
  25.         for (int i = 0; i < browserList.size(); i++) {   
  26.             Map map = (Map) browserList.get(i);   
  27.             //填充x轴   
  28.             dataSet.add((Integer) map.get("statCount"));   
  29.             //填充y轴   
  30.             xLabel.add(new Label((String) map.get("statVar")));   
  31.         }   
  32.         //设置X轴内容   
  33.         XAxis labels = new XAxis();   
  34.         labels.addLabels(xLabel);   
  35.         //设置Y轴显示值域:Range的三个参数含义为：坐标最小值，最大值和步进值   
  36.         YAxis range = new YAxis();   
  37.         range.setRange(0, 200, 10);   
  38.         //OFC折线图设置   
  39.         LineChart lineChart = new LineChart(LineChart.Style.NORMAL);   
  40.         lineChart.addValues(dataSet);   
  41.         lineChart.setColour("#6666FF");   
  42.         lineChart.setText("使用者数量");   
  43.         //图表设置   
  44.         Chart chart = new Chart("用户浏览器使用量分布");   
  45.         chart.setXAxis(labels);   
  46.         chart.setYAxis(range);   
  47.         chart.addElements(lineChart);   
  48.         //打印JSON格式的文本   
  49.         System.out.print(chart.toString());   
  50.         HttpServletResponse response = ServletActionContext.getResponse();   
  51.         response.setContentType("application/json-rpc;charset=utf-8");   
  52.         response.setHeader("Cache-Control", "no-cache");   
  53.         response.setHeader("Expires", "0");   
  54.         response.setHeader("Pragma", "No-cache");   
  55.         response.getWriter().write(chart.toString());   
  56.         return null;   
  57.     }   
  58. }  
package xxx.app.action.chart;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import jofc2.model.Chart;
import jofc2.model.axis.Label;
import jofc2.model.axis.XAxis;
import jofc2.model.axis.YAxis;
import jofc2.model.elements.LineChart;
import xxx.app.action.BaseAction;
public class OfcChartAction extends BaseAction {
	private Chart ofcChart;
	public Chart getOfcChart() {
		return ofcChart;
	}
	public String showChart() throws Exception{
		//y轴数据集合-使用数量
		List<Number> dataSet = new ArrayList<Number>();
		//x轴数据集合-浏览器类型
		List<Label> xLabel = new ArrayList<Label>();
		//获取需要显示的数据集
		List browserList = getServMgr().getVisitStatService().getBrowserStat();
		for (int i = 0; i < browserList.size(); i++) {
			Map map = (Map) browserList.get(i);
			//填充x轴
			dataSet.add((Integer) map.get("statCount"));
			//填充y轴
			xLabel.add(new Label((String) map.get("statVar")));
		}
		//设置X轴内容
		XAxis labels = new XAxis();
		labels.addLabels(xLabel);
		//设置Y轴显示值域:Range的三个参数含义为：坐标最小值，最大值和步进值
		YAxis range = new YAxis();
		range.setRange(0, 200, 10);
		//OFC折线图设置
		LineChart lineChart = new LineChart(LineChart.Style.NORMAL);
		lineChart.addValues(dataSet);
		lineChart.setColour("#6666FF");
		lineChart.setText("使用者数量");
		//图表设置
		Chart chart = new Chart("用户浏览器使用量分布");
		chart.setXAxis(labels);
		chart.setYAxis(range);
		chart.addElements(lineChart);
		//打印JSON格式的文本
		System.out.print(chart.toString());
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("application/json-rpc;charset=utf-8");
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Expires", "0");
		response.setHeader("Pragma", "No-cache");
		response.getWriter().write(chart.toString());
		return null;
	}
}


    Service中获取数据我们使用Spring的JdbcTemplate进行。

Java代码 复制代码 收藏代码
  1.     //获取记录的浏览器信息   
  2. private static final String SQL_GET_BROWER_STAT = "select statVar,statCount from nd_stats where statType='browser'";   
  3. /**  
  4.  * 获取记录的浏览器信息  
  5.  */  
  6. public List getBrowserStat() {   
  7.     return jt.queryForList(SQL_GET_BROWER_STAT);   
  8. }  
		//获取记录的浏览器信息
	private static final String SQL_GET_BROWER_STAT = "select statVar,statCount from nd_stats where statType='browser'";
	/**
	 * 获取记录的浏览器信息
	 */
	public List getBrowserStat() {
		return jt.queryForList(SQL_GET_BROWER_STAT);
	}


    写好Action，我们简单配置一下，因为我们只是得到JSON文本，所以不必配置跳转，只需配置请求即可。

Xml代码 复制代码 收藏代码
  1. <action name="ofcChart" class="xxx.app.action.chart.OfcChartAction">  
  2. </action>   
		<action name="ofcChart" class="xxx.app.action.chart.OfcChartAction">
		</action>


    页面的JS代码也很简单。如下即可：

Html代码 复制代码 收藏代码
  1. <script type="text/javascript" src="${base}/js/swfobject.js"></script>  
  2. <script type="text/javascript">  
  3.     var flashvars = {"data-file":"${base}/manage/stat/ofcChart!showChart.action"};   
  4.     var params = {menu: "false",scale: "noScale",wmode:"opaque"};   
  5.     swfobject.embedSWF("${base}/swf/open-flash-chart.swf", "chart", "600px", "400px", "9.0.0",   
  6.     "expressInstall.swf",flashvars,params);   
  7. </script>  
  8. <div id="chart">  
  9. </div>   
<script type="text/javascript" src="${base}/js/swfobject.js"></script>
<script type="text/javascript">
	var flashvars = {"data-file":"${base}/manage/stat/ofcChart!showChart.action"};
	var params = {menu: "false",scale: "noScale",wmode:"opaque"};
	swfobject.embedSWF("${base}/swf/open-flash-chart.swf", "chart", "600px", "400px", "9.0.0",
	"expressInstall.swf",flashvars,params);
</script>
<div id="chart">
</div>


    这里需要多说几句，首先是路径，不能错了，错了就请求不到数据了。Swfobject.js是页面使用JS方式配置Flash显示的，比较方便，所有使用它了。设置一个div用于Flash的显示，这个id是embedSWF的第二个参数，不能忘写了。还有就是请求地址参数的问题，这里我们是方便测试就没有传递参数，而实际开发不可避免传递参数。参数传递时在请求地址后面按普通形式书写即可，只是&这个连接符需要转义，写成%26，其他就没有什么了。
    我们得到的结果就是这样的，这是很普通的折线图。但是不比JFreeChart的差哦。

    同时在控制台我们得到jofc2为我们生成的JSON文本。

Js代码 复制代码 收藏代码
  1. {"is_thousand_separator_disabled":0,"is_decimal_separator_comma":0,"title":{"tex   
  2. t":"用户浏览器使用量分布"},"y_axis":{"min":0,"steps":10,"max":200},"x_axis":{"la   
  3. bels":{"labels":[{"text":"Safari"},{"text":"MSIE6X"},{"text":"MSIE7X"},{"text":"  
  4. MSIE8X"},{"text":"Firefox"},{"text":"Chrome"},{"text":"Opera"},{"text":"Maxthon"   
  5. },{"text":"Other"}]}},"num_decimals":2,"is_fixed_num_decimals_forced":0,"element   
  6. s":[{"font-size":10,"text":"使用者数量","type":"line","values":[6,2,63,168,1,10,   
  7. 1,0,0],"colour":"#6666FF"}]}   
{"is_thousand_separator_disabled":0,"is_decimal_separator_comma":0,"title":{"tex
t":"用户浏览器使用量分布"},"y_axis":{"min":0,"steps":10,"max":200},"x_axis":{"la
bels":{"labels":[{"text":"Safari"},{"text":"MSIE6X"},{"text":"MSIE7X"},{"text":"
MSIE8X"},{"text":"Firefox"},{"text":"Chrome"},{"text":"Opera"},{"text":"Maxthon"
},{"text":"Other"}]}},"num_decimals":2,"is_fixed_num_decimals_forced":0,"element
s":[{"font-size":10,"text":"使用者数量","type":"line","values":[6,2,63,168,1,10,
1,0,0],"colour":"#6666FF"}]}


    下面我们做柱状图，做个个性点的，用sketch类型。

Java代码 复制代码 收藏代码
  1. //Sketch型柱状图设置   
  2. SketchBarChart sketchChart = new SketchBarChart();   
  3. sketchChart.setColour("#6666FF");   
  4. sketchChart.addValues(dataSet);   
  5. sketchChart.setText("使用者数量");   
  6. //图表设置   
  7. Chart chart = new Chart("用户浏览器使用量分布");   
  8. chart.setXAxis(labels);   
  9. chart.setYAxis(range);   
  10. chart.addElements(sketchChart);  
//Sketch型柱状图设置
SketchBarChart sketchChart = new SketchBarChart();
sketchChart.setColour("#6666FF");
sketchChart.addValues(dataSet);
sketchChart.setText("使用者数量");
//图表设置
Chart chart = new Chart("用户浏览器使用量分布");
chart.setXAxis(labels);
chart.setYAxis(range);
chart.addElements(sketchChart);


    这样我们就得到了下面的显示效果，是不是很卡通，哈哈。

    需要注意jofc2将sketch风格的柱状图单独写成了一个类，而使用普通风格的柱状图时不时这么进行的。

Java代码 复制代码 收藏代码
  1. //柱状图Bar的集合   
  2. List<Bar> barList=new ArrayList<Bar>();   
  3. for (int i = 0; i < browserList.size(); i++) {   
  4.     Map map = (Map) browserList.get(i);   
  5.     //填充Bar，并给出提示   
  6.     barList.add(new Bar((Integer) map.get("statCount")).setTooltip("#val#次"));   
  7.     //填充y轴   
  8.     xLabel.add(new Label((String) map.get("statVar")));   
  9. }   
  10. //柱状图设置   
  11. BarChart barChart=new BarChart(BarChart.Style.GLASS);   
  12. barChart.addBars(barList);   
  13. barChart.setColour("#6666FF");   
  14. barChart.setText("使用者数量");   
  15. //图表设置   
  16. Chart chart = new Chart("用户浏览器使用量分布");   
  17. chart.setXAxis(labels);   
  18. chart.setYAxis(range);   
  19. chart.addElements(barChart);  
//柱状图Bar的集合
List<Bar> barList=new ArrayList<Bar>();
for (int i = 0; i < browserList.size(); i++) {
	Map map = (Map) browserList.get(i);
	//填充Bar，并给出提示
	barList.add(new Bar((Integer) map.get("statCount")).setTooltip("#val#次"));
	//填充y轴
	xLabel.add(new Label((String) map.get("statVar")));
}
//柱状图设置
BarChart barChart=new BarChart(BarChart.Style.GLASS);
barChart.addBars(barList);
barChart.setColour("#6666FF");
barChart.setText("使用者数量");
//图表设置
Chart chart = new Chart("用户浏览器使用量分布");
chart.setXAxis(labels);
chart.setYAxis(range);
chart.addElements(barChart);


    我们得到如下的柱状图。

   最后一种是饼状图，下面我们来画饼。

Java代码 复制代码 收藏代码
  1. //饼状图   
  2. PieChart pieChart = new PieChart();   
  3. for (int i = 0; i < browserList.size(); i++) {   
  4.     Map map = (Map) browserList.get(i);   
  5.     //填充x轴   
  6.     dataSet.add((Integer) map.get("statCount"));   
  7.     //饼状图添加块   
  8.     pieChart.addSlice((Integer) map.get("statCount"), (String) map.get("statVar"));   
  9. }   
  10. //饼状图设置   
  11. pieChart.setColours("#d01f3c", "#356aa0", "#C79810");   
  12. pieChart.setText("使用者数量");   
  13. pieChart.setRadius(180); //饼图的半径   
  14. pieChart.setTooltip("#val# / #total#<br>#percent#");   
  15. //图表设置   
  16. Chart chart = new Chart("用户浏览器使用量分布");   
  17. chart.setXAxis(labels);   
  18. chart.setYAxis(range);   
  19. chart.addElements(pieChart);  
//饼状图
PieChart pieChart = new PieChart();
for (int i = 0; i < browserList.size(); i++) {
	Map map = (Map) browserList.get(i);
	//填充x轴
	dataSet.add((Integer) map.get("statCount"));
	//饼状图添加块
	pieChart.addSlice((Integer) map.get("statCount"), (String) map.get("statVar"));
}
//饼状图设置
pieChart.setColours("#d01f3c", "#356aa0", "#C79810");
pieChart.setText("使用者数量");
pieChart.setRadius(180); //饼图的半径
pieChart.setTooltip("#val# / #total#<br>#percent#");
//图表设置
Chart chart = new Chart("用户浏览器使用量分布");
chart.setXAxis(labels);
chart.setYAxis(range);
chart.addElements(pieChart);


    生成的饼状图如下：

    OFC接收一个JSON格式的文本用来填充Flash，Flash解析这段文本就生成了漂亮的图表。当然OFC的设置还有很多，可以做出非常炫的效果，这里就不深入研究了，当然就是set一些属性罢了。最后我们还是看一下JFreeChart的吧。

    希望对使用者有用，欢迎交流探讨更深入内容。

分享到：
| open flash chart 2 教程
评论
1 楼 hesai_vip 2013-10-10  
写的很不错！   果断收藏！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    open flash chart api

    Open Flash Chart API 是一款强大的开源图表库，它使用Flash技术来生成高质量、交互式的图表。在Web开发中，数据可视化是至关重要的，Open Flash Chart API 提供了丰富的功能，使得开发者能够轻松创建各种类型的图表...

    开源flash图表--open flash chart

    2. **丰富的图表类型**：Open Flash Chart支持多种图表类型，如折线图、柱状图、饼图、散点图、面积图、甘特图等，能满足各种数据分析和展示的需求。 3. **高度可定制**：开发者可以通过调整各种参数来改变图表的...

    Open Flash Chart 教程

    Open Flash Chart 是一款开源的Flash图表库，它允许开发者通过简单的JavaScript API生成各种美观的、交互式的图表。这个教程可能是为了帮助用户理解如何利用Open Flash Chart来创建动态和定制化的图表，适合Web...

    open flash chart库

    2. **引入库**：在PHP代码中引入Open Flash Chart的库文件，通常是`ofc_loader.php`。 3. **构建数据**：根据实际需求，创建PHP数组或对象，存储图表的数据和配置信息。 4. **生成图表**：调用Open Flash Chart的...

    Open Flash Chart所需文件

    Open Flash Chart是一款强大的开源Flash图表库，用于在Web应用程序中创建高质量、互动的图表。它提供了丰富的自定义选项，能够生成各种类型的图表，包括柱状图、饼图、线点图等，使得数据可视化变得更加简单易行。在...

    Open Chart Flash [ofc]图表示例一 （附图）

    《Open Chart Flash (ofc) 图表示例一详解》 在数据分析和可视化领域，图表的使用至关重要，它能够直观地展示复杂数据，帮助用户理解并分析信息。Open Chart Flash (ofc) 是一个强大的开源图表库，专为Flash平台...

    Open Flash Chart Flash图表

    Open Flash Chart是一款强大的开源图表生成库，专门用于创建高质量、互动性强的Flash图表。这款组件以其易用性和灵活性著称，使得开发者无需深入学习复杂的Flash编程就能轻松制作出各种复杂的数据可视化效果。以下是...

    flash图表组件Open Flash Chart 2.0+(asp/php)自动提取示例+使用说明

    本实例在IE6、IE7、IE8、Chrome、Firefox测试通过，在实际项目使用中，对可能出现的问题，尤其在IE6中无法显示flash图表，本人特撰写《Flash图表组件——使用Open Flash Chart 2.0的一些问题及解决办法》，具体访问...

    Open Flash Chart例子、中文版PDF说明文档、参数表

    Open Flash Chart（简称OFC），是一个开源的flash报表组件。我们不仅可以免费使用，而且还可以修改源码，来达到我们想要的效果。客户端在得到数据以后，在Flash Player中渲染出报表图。 　附带PDF说明文档，是中文版...

    完整的open flash chart 。

    Open Flash Chart是一款强大的开源图表库，它使用Flash技术来创建美观、交互式的图表。这款工具在Web开发中尤其受欢迎，因为它允许开发者轻松地为网站添加数据可视化功能，而无需深入学习复杂的图形编程。以下是关于...

    open flash chart 2 使用

    Open Flash Chart 2 是一款强大的开源图表库，它使用 Adobe Flash 技术来创建各种美观且交互性强的数据可视化图表。这个库特别适合那些需要在网页上展示复杂数据的开发者，它提供了丰富的图表类型和自定义选项。本文...

    在网页中使用Open Flash Chart 展示图表

    在网页中使用Open Flash Chart展示图表是一项常见的数据可视化任务，尤其在那些需要动态、交互式图形的Web应用中。Open Flash Chart是一款开源的Flash图表库，它允许开发者使用简单的JavaScript和服务器端语言（如...

    open-flash-chart2系列教程

    Open Flash Chart 2（简称OFC2）是一款强大的开源图表生成库，专为创建交互式、动态的Flash图表而设计。它允许开发者通过JSON格式的数据来构建各种类型的图表，如折线图、柱状图、饼图等，广泛应用于数据分析、报表...

    open-flash-chart-1[1].9.7.zip_flash chart tr_open flash chart

    4. **perl-ofc-library**、**perl-2-ofc-library**：这是Perl语言的Open Flash Chart接口库，允许Perl开发者通过简单的API调用来生成和定制图表。 5. **java-ofc-library**：Java版本的Open Flash Chart库，为Java...

    Open Flash Chart 报表插件相关

    在压缩包文件"ofc"中，可能包含了Open Flash Chart的源代码、示例项目、文档和库文件，供开发者学习和参考。通过深入研究这些内容，开发者可以更好地理解和掌握Open Flash Chart的使用方法，从而在自己的ASP.NET项目...

    最新版Open Flash Chart

    Open Flash Chart是一款强大的开源Flash图表组件，用于创建各种复杂且美观的数据可视化效果。这款软件的最新版本2.0带来了更多的功能和改进，旨在为开发者提供更便捷、灵活的方式来展示数据。下面将详细介绍Open ...

    图表工具(Open_Flash_Chart)在java中的使用

    Open Flash Chart是一款强大的图表工具，尤其适用于Java开发者。它是一个基于Flash的图形库，能够创建出美观、流畅的图表，支持多种图表类型，包括条形图、饼图、线图等，总计11种基本图形，能满足大多数数据分析和...

    Open Flash Chart的使用说明及参数的设定

    Open Flash Chart，制作图表，柱状图，饼图，线点图，Open Flash Chart的使用说明及参数的设定。

    open flash chart2实例

    Open Flash Chart 2是一款强大的开源图表库，它允许开发者创建各种动态、美观的图表，包括饼图、曲线图和柱状图等。这个实例集合提供了一系列的示例代码，帮助我们理解和应用Open Flash Chart 2的功能。下面我们将...

    open flash chart 实例1

    - 然后，利用JavaScript创建一个图表对象，例如`var chart = new OFC.Chart();`。 - 接着，加载`data.json`文件中的数据，可以使用Ajax请求获取，或者直接将数据字符串化写入JavaScript代码。 - 使用`chart....

Magicbox
Global site tag (gtag.js) - Google Analytics