首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Flash >

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

2012-08-10 
在网页中使用Open Flash Chart 展示图表package com.test.servletimport java.io.IOExceptionimport jav

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

package com.test.servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import jofc2.model.Chart;import jofc2.model.axis.Label;import jofc2.model.axis.XAxis;import jofc2.model.axis.YAxis;import jofc2.model.elements.BarChart;import jofc2.model.elements.BarChart.Bar;/** * Servlet implementation class GetJsonServlet */public class GetJsonServlet extends HttpServlet {private static final long serialVersionUID = 1L; /** * Default constructor. */ public GetJsonServlet() { // TODO Auto-generated constructor stub }/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {List<MonitorCount> counts = initDatas();int total = counts.size();List<Label> xLabels = new ArrayList<Label>(total);List<Bar> barList = new ArrayList<Bar>(total);for(int i=0; i<total; i++) {MonitorCount mCount = counts.get(i);int count = mCount.getCount(); barList.add(new Bar(count)); String xLabel = mCount.getLabel();xLabels.add(new Label(xLabel));}// 设置X轴坐标值XAxis xAxis = new XAxis();xAxis.addLabels(xLabels);// 设置Y轴的范围YAxis yAxis = new YAxis();yAxis.setRange(0, 150, 10);BarChart barChart = new BarChart(BarChart.Style.GLASS);barChart.addBars(barList);barChart.setText("HTTP BarChart");Chart chart = new Chart("HTTP日访问量");chart.setXAxis(xAxis);chart.setYAxis(yAxis);chart.addElements(barChart);String json = chart.toString();System.out.println("json = " + json);sendJson(response, json);}/** * 模拟初始化数据 * @return */private List<MonitorCount> initDatas() {List<MonitorCount> data = new ArrayList<MonitorCount>();data.add(new MonitorCount("1月", 100));data.add(new MonitorCount("2月", 120));data.add(new MonitorCount("3月", 140));data.add(new MonitorCount("4月", 125));data.add(new MonitorCount("5月", 145));data.add(new MonitorCount("6月", 138));return data;}/** * 返回JSON数据给客户端 * @param response * @param json */protected void sendJson(HttpServletResponse response, String json) {response.setContentType("application/json; charset=utf-8");PrintWriter writer = null;try {writer = response.getWriter();writer.write(json);} catch (IOException e) {e.printStackTrace();} finally {if (null != writer) {writer.flush();writer.close();}}}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}}class MonitorCount {private String label;private Integer count;public MonitorCount(String label, Integer count) {super();this.label = label;this.count = count;}public String getLabel() {return label;}public void setLabel(String label) {this.label = label;}public Integer getCount() {return count;}public void setCount(Integer count) {this.count = count;}}?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Open Flash Chart - Hello World</title><script type="text/javascript" src="swfobject.js"></script><script type="text/javascript">var url = encodeURIComponent("/OpenFlashChartHelloWorld/GetJsonServlet");swfobject.embedSWF("open-flash-chart.swf", "chart", "950", "500", "9.0.0", "expressInstall.swf",{"data-file":url});</script></head><body><div id="chart"></div></body></html>?

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

则可能是open-flash-chart.swf文件是OFC 1.x版本的,把它换成2版本的就成了。

?

4,总结

???????? OpenFlash Chart除了可以显示多种图表外,还提供了一些强大的功能,比如高亮、突出某个点,将图表保存成图片,在图表中移动鼠标会有提示信息,点击图表响应事件等。在项目开发过程中我们经常需要根据实现情况调整数据的来源或者显示的图形。这里我只是写一个简单的入门程序,有兴趣的童鞋可以自己去阅读官方网站或查阅相关的文档。

?

附:本例源码。

热点排行