`
leifeng2
  • 浏览: 142421 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

OpenFlashChartDemo动态数据显示

jsonFlashJavaScriptServletPHP 
阅读更多 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>

<script type="text/javascript" src="<%=request.getContextPath() %>/ofc2/swfobject.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ofc2/json2.js"></script>

<body>
   <div id="div1"></div>
   <p><input type="button" value="重新加载" onclick="reload1()" >  </p>
   <div id="div2" ></div>
</body>
</html>

<script type="text/javascript" language="javascript">
//定义第一个Flash控件
swfobject.embedSWF("<%=request.getContextPath() %>/ofc2/open-flash-chart.swf", "div1", "50%", "280","9.0.0", "expressInstall.swf", 
 {"data-file" : "<%=request.getContextPath() %>/servlet/GlassChartServlet"}, 
 {wmode : "transparent"}
);
	
//定义第二个Flash控件	
swfobject.embedSWF("<%=request.getContextPath() %>/ofc2/open-flash-chart.swf", "div2", "50%", "280","9.0.0", "expressInstall.swf",
 {"data-file" : "<%=request.getContextPath() %>/servlet/GlassChartServlet"}, 
 {wmode : "transparent"}
);

//根据请求一个URL，重新加载第一个Flash控件的数据
function reload1()
{
  tmp = findSWF("div1");
  x = tmp.reload( "<%=request.getContextPath() %>/servlet/GlassChartServlet" ); 
}
		

//第二个Flash控件,直接加载JSON数据	
function reload2()
{
  tmp = findSWF("div2");
  x = tmp.load( JSON.stringify(getNewData()) );
}

//生成一个JSON数据对象
function getNewData()
{
  var arraylist=[
    parseInt(100*Math.random()),
    parseInt(100*Math.random()),
    parseInt(100*Math.random()),
    parseInt(100*Math.random()),
    parseInt(100*Math.random()),
    parseInt(100*Math.random()),
    parseInt(100*Math.random()),
    parseInt(100*Math.random()),
    parseInt(100*Math.random()),
    parseInt(100*Math.random()),
    parseInt(100*Math.random()),            
    parseInt(100*Math.random())
    ];
     
	var data = {
		"title":{"text":"Sales by Month 2007","style":"font-size: 14px; font-family: Verdana; text-align: center;"}, 
		"x_axis":{"labels":{"labels":["J","F","M","A","M","J","J","A","S","O","N",{"text":"Dec", "colour":"#000000", "size":10, "rotate":45}]}},
		"y_axis":{"steps":16, "max":160},
		"bg_colour":"#ffffff", 
		"elements":[{"type":"bar_glass", "tip":"$#val#", "values":arraylist, "colour":"#00aa00"}]
	}
	
	return data;
}

//定时器,自动重新加载数据
setInterval(reload2,"1000");
	
//查找SWF控件	
function findSWF(movieName) 
{
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}
	
</script>

 

package com.flashchart;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.Map.Entry;

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.Text;
import jofc2.model.axis.XAxis;
import jofc2.model.axis.YAxis;
import jofc2.model.elements.BarChart;
import jofc2.model.elements.BarChart.Bar;

public class GlassChartServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 		
		 response.setContentType("application/json");
	     response.setHeader("Cache-Control", "no-cache");
	     response.setCharacterEncoding("UTF-8");
	     PrintWriter out = response.getWriter();

	     Map<String, Long> dataMap = new LinkedHashMap<String, Long>();
	     String[] month={"一月","二月","三月","四月","五月","六月","七月","八月"};
	     for(int i=0;i<8;i++)
	     {
	    	 dataMap.put(month[i],Math.round(Math.random()*710));
	     }	    

	     Chart ofc2Chart = new Chart();
	     Text title = new Text("2010年度XXXXX业务办理量");
	     ofc2Chart.setTitle(title);

	     BarChart barChart = new BarChart(BarChart.Style.GLASS); // 设置条状图样式
	     
	     XAxis x = new XAxis();                                  // X 轴	     
	     for (Entry<String, Long> entry : dataMap.entrySet()) 
	     {
	         x.addLabels(entry.getKey());                        // x 轴的文字
	         Bar bar = new Bar(entry.getValue(),"起 ");
	         bar.setColour("0x336699");                          // 颜色
	         bar.setTooltip(entry.getValue() + "起 ");           // 鼠标移动上去后的提示
	         barChart.addBars(bar);                          

	     }
	     
	     ofc2Chart.addElements(barChart);
	     ofc2Chart.setXAxis(x);

	     double ymax = 720d;     // Y 轴最大值
	     YAxis y = new YAxis();  // y 轴	     
	     y.setMax(ymax + 1.0);   // y 轴最大值
	     y.setSteps(ymax / 10);  // y 轴步进
	     ofc2Chart.setYAxis(y);

	     String jsonChart = ofc2Chart.toString();
	     out.write(jsonChart);
	     
	     out.flush();
	     out.close();
		} 
}

 

 

function reload()
{
  tmp = findSWF("chart");
  
  //
  // reload the data:
  //
  x = tmp.reload();
  
  //
  // to load from a specific URL:
  // you may need to 'escape' (URL escape, i.e. percent escape) your URL if it has & in it
  //
  x = tmp.reload("gallery-data-32.php?beer=1");
  
  //
  // do NOT show the 'loading...' message:
  //
  x = tmp.reload("gallery-data-32.php?beer=1", false);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window["ie_" + movieName];
  } else {
    return document[movieName];
  }
}

 

 按照官方资料，我在设置第二个参数时，它就报错，这里先记下了，有待解决？
  // do NOT show the 'loading...' message:
  x = tmp.reload( "<%=request.getContextPath() %>/servlet/GlassChartServlet",false );

 

 

  上一张效果图，如下：

 

分享到：
| input 边框样式
评论
3 楼 leifeng2 2011-08-21  
不好意思，很久没来了。
说明：上面的例子当时是在IE下测试的，没有问题。
如果没有动画效果，主要看看下面这段代码是否执行：
//定时器,自动重新加载数据  
setInterval(reload2,"1000"); 

   这是让第二个图表数据每秒钟刷新一次，因为加载的都是随机数，所以每次数据不同，看到的图表会不一样。
    关键点：定时器是否执行、随机数是否生成。
2 楼 forneverkk 2011-08-06  
你好博主，这个例子我已近实验过了，可以用，但是没有动画效果啊，
我看到这个网站上www.ofc2dz.com上给的页面展示中，柱状图初始的时候，会自动上涨，
这个效果怎么实现的啊？急求，偶qq 342401526
1 楼 howgoo 2010-12-02  
查看OFC2的代码，发现如下： 
// an external interface, used by javascript to
		// reload JSON from a URL :: mf 18nov08
		//
		public function reload( url:String ):void {


x = tmp.reload 已经不需要带false参数了。
发表评论

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

相关推荐

    OpenFlashChartDemo.rar

    总的来说，OpenFlashChartDemo提供了一个实践和学习OpenFlashChart的起点，帮助开发者快速掌握在Web应用中创建吸引人的、动态的图表技能。尽管现代Web开发可能更倾向于使用HTML5 Canvas或SVG，但OpenFlashChart对于...

    OpenFlashChartDemo

    在实际应用中，数据可以从数据库、CSV文件或其他数据源动态加载，以实现图表内容的实时更新。 总的来说，OpenFlashChartDemo是一个很好的学习资源，它展示了如何利用Java和OpenFlashChart库在Web应用中创建动态、...

    JAVA动画报表统计画图控件OpenFlashChartDemo

    总结来说，Java动画报表统计画图控件OpenFlashChartDemo是一个用于数据可视化的强大工具，尤其适合于需要动态展示和交互的场景。它允许开发者通过输入报表数据，调整参数，创建出各种类型的动画统计图，从而提升数据...

    flex的报表工具，开源的OpenFlashChar

    4. **动态交互**：OpenFlashChart的图表可以响应用户的交互操作，例如鼠标悬停显示数据提示，点击高亮，拖动图表轴等，增强了用户体验。 5. **数据绑定**：通过简单的API，OpenFlashChart可以方便地与服务器端的...

    OpenFlashChar2例子

    在提供的压缩包"OpenFlashChartDemo"中，包含了OpenFlashChart2的多个示例，涵盖了基本图表类型、自定义颜色、动态数据加载等功能。通过学习这些示例，我们可以了解如何根据实际需求调整图表样式和交互行为。 1. ...

    open flash chart 制图Demo及文档

    同时，Demo还展示了图表的交互功能，如鼠标悬停时的数据显示、点击事件处理等，这对于提升用户体验至关重要。 接下来是"文档"部分。Open Flash Chart的官方文档提供了详尽的技术指南，包括安装、基本用法、API参考...

    open flash chart 例子相关的说明文档

    Graph-doc.rar包含的是关于图表组件的进一步文档，这些文档可以帮助开发者更深入地理解Open Flash Chart的高级功能，比如动态更新图表、添加交互式元素（如鼠标悬停时显示数据点信息）以及如何使用多种类型的图表...

    open flash chart 1.9 文档及源码

    3. **动态交互**：图表支持动态数据更新和用户交互，例如点击事件、鼠标悬停显示详细信息等，增强了用户体验。 4. **服务器端支持**：Open Flash Chart 可以与各种服务器端语言（如PHP、Java、Python等）配合使用，...

    openFlashChart 实例及使用文档.rar

    4. **动态交互**：可以实现动态更新数据、鼠标悬停显示详细信息、点击事件响应等功能，增强用户交互体验。 5. **高度可定制**：几乎所有的图表元素都可以自定义，包括线条样式、字体、颜色、背景等，为设计个性化...

    Openflashchart很好的图表开源工具

    - **渲染**：在客户端，通过JavaScript加载JSON数据，并调用OpenFlashChart的函数将数据转换成图表显示。 3. **与Java的集成** - **数据准备**：在Java应用中，可以使用POJO（Plain Old Java Object）或数组来...

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