time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 导出OpenFlashChart的图片示例

导出OpenFlashChart的图片示例

时间:2012-12-31 23:10 点击:4689次 字体:[ ]




 这几天用OpenFlashChart这个开源组件做一些图形呈现方面的工作(OFC基于LGPL开源协议)。由于OFC对JSON支持的非常好,所以用它加载数据非常方便。同时它本身的配置就是JSON格式,这就可以方便的用JS对它的行为进行动态控制。但熟悉OFC的朋友都知道,它本身并没有提供直接导出图形的功能。仅在右键菜单中预留了一个"Save Image Locally"的接口。其实,在OFC内部已经实现了几个与图形有关的辅助方法。下面对本人最近实现的OFC导出图形做一个记录(部分代码参考了互联网)。

项目中用到的最新版本的OFC下载地址:

http://sourceforge.net/projects/openflashchart/files/

首先,由于添加Flash到页面是一个非常普遍的操作。先封装一个通用的方法:

  1. /* 
  2. * 功能:在指定容器中添加flash 
  3. * 参数: 
  4. *     file      swf文件路径 
  5. *     container 容器ID 
  6. *     width    swf宽度 
  7. *     height   swf高度 
  8. *     key      唯一编号 
  9. * 返回:唯一标识(flashID标识,可选,如果未设置将自动生成一个) 
  10. */ 
  11. function addswf(file, container, width, height, key) { 
  12.     var id = "flash_" + Math.random(); 
  13.     if (key) { 
  14.         id = key; 
  15.     } 
  16.     else { 
  17.         key = id; 
  18.     } 
  19.     var url = file + "?key=" + id; 
  20.     var swfVersionStr = "0.0.0"
  21.     var xiSwfUrlStr = url; 
  22.     var flashvars = {}; 
  23.     var params = {}; 
  24.     params.quality = "high"
  25.     params.bgcolor = "#fefefe"
  26.     params.wmode = "transparent"
  27.     params.allowscriptaccess = "sameDomain"
  28.     params.allowfullscreen = "true"
  29.     var attributes = {}; 
  30.     attributes.id = id; 
  31.     attributes.name = id; 
  32.     attributes.align = "middle"
  33.     swfobject.embedSWF( 
  34.         url, container, 
  35.         width, height, 
  36.         swfVersionStr, xiSwfUrlStr, 
  37.         flashvars, params, attributes); 
  38.     return key; 
  39. }; 

然后我们就可以在页面中调用:

  1. addswf("/flash/OFC.swf?random=" + Math.random(), "chartContainer""800", 300, "OFC_obj"); 

 

值得注意的是,在上面的调用代码中,在OFC的路径后面追加了一个random参数,它是一个随机值。这样就强制让浏览器在载入页面的时候重新加载OFC.swf,而不是从缓存中读取。实践发现,许多OFC在IE下面表现的奇怪问题,都是因为这个缓存读取导致。

OFC添加至页面后,需要在JS中提供下面这个方法:

 

  1. function open_flash_chart_data() { 
  2.     //这里返回OFC实例数据 

open_flash_chart_data方法会由OFC自动调用。经本人测试,如果没有提供上述方法,页面一般会有如下提示:

  1. Open Flash Chart 
  2. IO ERROR 
  3. Loading test data 
  4. Error #2032 

另外,如果OFC需要呈现的数据不止一项的话,通常需要让每一项呈现不同的颜色:

  1. //随机颜色生成 
  2. function randomColor() { 
  3.             return '#' + (Math.random() * 0xffffff).toFixed(0); 

然后,可以直接用代码控制每一项的颜色,如下所示(线性图):

  1. var item_bar = { 
  2.        "type""bar_glass"
  3.        "alpha": 0.5, 
  4.        "colour"""
  5.        "on-show": { "type""grow-up" }, 
  6.        "text"""
  7.        "font-size": 12, 
  8.        "tip"""
  9.        "values": [] 
  10. }; 
  11. item_bar.colour = randomColor(); 
  12. //...更多配置 



本文地址 : http://www.fengfly.com/plus/view-211238-1.html
标签: 导出 图片 示例 openflashchart
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: