上一节在研究Open Flash Chart时,漏掉不少东西,只是简单的熟悉了一下后端的属性设置。今天再来补充一下。

一、显示Open Flash Chart图表

  Open Flash Chart 前台配置:

  swfobject.embedSWF(flashPath, "chart", "100%", "100%", "9.0.0", "expressInstall.swf",{}, {},{id:'custom'}); // ID为custom 

  上面的太虚了,来说个实际点的例子,在要显示图表的地方,放上这段代码:

            <script type="text/javascript">
swfobject.embedSWF("/FlashChart/open-flash-chart-SimplifiedChinese.swf", "chart", "100%", "200px", "9.0.0", "expressInstall.swf", { "data-file": "/Plat/Comment?d=30" });
</script>

  其中,第一个参数是swf文件的地址,第二个参数是图标要实现的div的Id,第三个参数是宽度,第四个参数是高度,第5个参数应该是版本什么的,写死的,第六个参数是一个swf地址,干什么的不知道,第六个参数是json数据的地址。当然,第六个参数也可以指定要将图表显示到的Html元素ID,如果嵌入SWF文件时没有指定即embedSWF的最后一个参数里没有类似{id:'customID'}的代码则默认会使用HTML元素的ID。

swfobject.embedSWF(flashPath, "chart", "100%", "100%", "9.0.0", "expressInstall.swf",{}, {},{id:'custom'}); // ID为custom
swfobject.embedSWF(flashPath, "chart", "100%", "100%", "9.0.0", "expressInstall.swf",{}, {}); // ID为chart

二、加载数据(open_flash_chart_data()函数)

  通常,数据可以写死在配置文件中,就如同这个例子:

            <script type="text/javascript">
swfobject.embedSWF("/FlashChart/open-flash-chart-SimplifiedChinese.swf", "chart", "100%", "200px", "9.0.0", "expressInstall.swf", { "data-file": "/Plat/Comment?d=30" });
</script>

  在data-file中指定数据的地址,但是如果没有在配置时就写死data-file,则Open Flash Chart会调用open_flash_chart_data()这个javascript函数获取数据。,所以我们可以在页面上定义该方法,并在方法实现中创造(或者其它路径,如向服务器请求数据等)JSON数据,然后将JSON数据转成String字符串返回即可。

  例如:

 
        function open_flash_chart_data(i) {
$.ajax({
url: '/Plat/Comment?d=' + i,
type: 'get',
dataType: 'text',
success: function (data) {
findSWF("month_Tooltip").load(data);
}
});
return "";
} function findSWF(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
 

  这段代码是在嵌入SWF后用AJAX方式去获取数据,然后动态更新OFC图表数据。因为数据是从服务器获取的而且AJAX是异步的,所以这个open_flash_chart_data方法无法直接返回JSON字符串,而只能返回空字符串;在AJAX请求返回后才将数据传递给OFC。这段代码非常有用,比如你默认显示30天的数据,但当用户点击某个按钮后显示7天的数据,就可以调用该方法,实现异步刷新图表。

三、ofc_ready()函数

  该回调函数是在OFC载入数据之后调用的,在这个函数里可以作一些操作,比如启动一个计时器动态获取最新数据,然后使页面中的OFC动态加载最新数据,从而可以完成OFC的动态更新。

  例如:

 
/**
* 在OFC加载完成数据之后,启动定时器,2秒钟更新一次图表
*/
function ofc_ready() {
setInterval(function () {
update();
}, 2000);
}
 

四、重新加载数据

  由于OFC图表数据是在浏览器以JavaScript对象的形式进行持有(或者重新去服务器端加载数据),所以非常容易对其进行操作,然后让图表Flash动态进行加载数据,从而可以对图表动态更新。这里利用了OFC图表对象自带的JavaScript回调接口load:

/**
* 操作数据代码,依据个人需求修改数据或者重新获取等
* 这里的data参数是JSON对象,JSON.stringify方法是将其转换为String串,方法定义在json2.js中
*/
findSWF("chart").load(JSON.stringify(data));

  这样在数据正确的情况下,图表就会重新渲染,完成动态更新。当然图表的样式可以随意改变,不仅仅是图表内容更新,比如,我们可以将饼图变为线型图,然后再变成柱形图,也可以将柱形图的数据改变一些之后再重新渲染成柱形图,只是柱子的高低有所变化;所以渲染成什么样子完全取决于数据。

五、图表生成图片

  ofc生成图片有两种选择:

  1、生成图片,然后上传到服务器保存起来;   

2、生成图片,然后传给JavaScript函数;

  1、上传至服务器

  OFC暴露了一个接口用于将图片数据上传至服务器,这就是post_image()方法;接口定义如下:

/**
* @param url 是一个字符串,即图片上传路径,可以跟参数.如http://example.com/ofc/ofc_upload_img.php?name=chart.jpg
* @param callback 字符串类型,指定一个JavaScript方法名作为图片上传成功后的回调函数,只有当debug参数为false时可用
* @param debug Boolean类型,如果为true会重新打开一个窗口显示结果
*/
post_image(url:String, callback:String, debug:Boolean);

  比如我们可以这样调用:

findSWF("chart").post_image(contextPath + "/ofc2/.......",'',false); 

  2、交给JavaScript处理

  交给JavaScript处理的话可操作性就比较丰富了,我们可以将图片直接显示在当前页面或者显示在新窗口;也可以将图片上传至服务器保存;甚至模拟图片下载的方式由服务器接收图片数据后转换成图片再将文件流写回页面等。不管采用何种操作,我们首先要做的就是获取图片数据,这里又用到了OFC暴露的另外一个接口:get_img_binary(),这个方法用来获取图表对应图片数据的Base64编码。

var base64Data = findSWF("chart").get_img_binary();  // 获取图表对应图片数据的Base64编码
$("#showImg").empty().append("<img src='data:image/png;base64," + base64Data + "' />"); // 渲染一个图片元素,添加到指定的DIV中

  再比如我们将获取到的Base64编码提交给服务器,服务器进行解码处理成图片后再以文件流方式写回页面,这样就类似于图片下载了:

/**
* 这里将图片Base64编码放进页面的一个隐藏域,然后将该隐藏域所在的Form提交,
* 这样在服务器写出文件流时会弹出文件保存对话框,也就类似于"图片另存为..."
*/
$("input[name='imgBase64Code']").val(findSWF("chart").get_img_binary());
$("#savePicForm").submit();

3、服务器接收图片的Base64编码数据

  如果我们将图片的Base64编码提交提交到了服务器,那么为了得到原始数据我们需要在后台进行Base64解码,然后将解码后的数据输出到浏览器实现类似图片下载的功能或者保存下来;每种服务器语言解码方式可能都不一样,在Java语言中可以使用Base64Decoder类来解码。

六、Save_Image_Locally函数

  OFC在Flash的右键菜单中预留了一个接口:Save_Image_Locally,这个菜单项被点击时会调用页面中定义的名字为save_image的JavaScript方法。所以我们也可以将该接口作为上一步描述的JavaScript处理图表生成的图片数据的入口,比如我们定义如下的JavaScript方法:

// 点击右键菜单项中的“Save_Image_Locally”选项时触发
function save_image() {
$("input[name='imgBase64Code']").val(findSWF("chart").get_img_binary());
$("#savePicForm").submit();
}

Open Flash Chart 之线图(二)的更多相关文章

  1. Open Flash Chart 之线图

    天公司要求开发一个曲线图,简单看了一下之前公司的一个系统,发现一个曲线图效果还不错,查了一下叫OpenFlashChart,还是很不错的,很多人用.研究了一下,发现还不错,特地写了个DEMO测试下. ...

  2. 关于k Line Chart (k线图)

    K Line Chart python实现k线图的代码,之前找过matplotlib中文文档但是画k线图的finance方法已经弃用了.所以自己在网上搜寻一下加上改编,很好的实现出k线图, 代码如下: ...

  3. R语言-线图(二)

      1.线图示例 plot()为高水平作图命令,axis().lines().legend()都为低水平作图命令 > rain<-read.csv("cityrain.csv&q ...

  4. 推荐几款web站点JS(JQeury)图表(饼图,柱图,线图)

    一 Google Chart Tools 官网:https://developers.google.com/chart/ 谷歌图表工具提供了一个完美的方式形象化您的网站上的数据.从简单到复杂的层次结构 ...

  5. PHP使用HighChart生成股票K线图详解

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...

  6. 一起来玩echarts系列(一)------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

  7. K线图学习

    本博文(适合入门的股民朋友)内容来自网络,股市有风险,入市需谨慎 一.起源 K线图(Candlestick Charts)又称蜡烛图.日本线.阴阳线.棒线等,常用说法是“K线”,起源于日本十八世纪德川 ...

  8. Wijmo金融图表系列之平均K线图&砖形图

    2015年7月16日将会发布有史以来最令人兴奋的控件-Wijmo 金融图表,它的一体化设计为单个自定义集合提供了所有主要的金融图表,这是市场上的其他控件都不具备的独一无二的好处.它像Wijmo其他任意 ...

  9. Highcharts candlestick(K线图)案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 深入理解$watch ,$apply 和 $digest --- 理解数据绑定过程——续

    Angular什么时候不会自动为我们$apply呢? 这是Angular新手共同的痛处.为什么我的jQuery不会更新我绑定的东西呢?因为jQuery没有调用$apply,事件没有进入angular ...

  2. JavaScript运算符:递增递减运算符前置和后置的区别

    从两段代码说起 var num1 = 2; var num2 = 20; var num3 = --num1 + num2; var num4 = num1 + num2; console.log(n ...

  3. pos提交提交数据时碰到Django csrf

    我的github(PS:希望star):https://github.com/thWinterSun/v-admin 最近在用Vue写前端代码,再用vue-resource向后台提交数据.项目后台是用 ...

  4. 共享内存创建shmget控制操作shmat,shmctl

    1.共享内存的数据结构 共享内存就是分配一块能被其他进程访问的内存.每个共享内存段在内核中维护着一个内部结构: struct shmid_ds { struct ipc_perm shm_perm; ...

  5. logistic 回归与线性回归的比较

    可以参考如下文章 https://blog.csdn.net/sinat_37965706/article/details/69204397 第一节中说了,logistic 回归和线性回归的区别是:线 ...

  6. for each...in,for...in, for...of

    一.for  each ...in explanation: 该语句在对象属性的所有值上迭代指定的变量.对于每个不同的属性,执行指定的语句. 句法: for each (variable in obj ...

  7. TListBox的项目个数

    function TCustomListBox.GetCount: Integer; begin if Style in [lbVirtual, lbVirtualOwnerDraw] then Re ...

  8. 卡巴斯基KAV2013 – 免费一年 (六一活动)

    赠送时间:2013年5月31日10时 至 2013年6月1日24时赠送产品:卡巴斯基反病毒软件2013(一年版)赠送方式:产品激活码将以电邮方式发送到您提交信息的邮箱里,每个邮箱仅能领取一个激活码.温 ...

  9. 【Grails 代理Proxy设置】部署Grails遇到Error Resolve error obtaining dependencies:错误,及解决方法

    最近在使用Grails,一开始使用3.0.2版本,一直包nullpointer错误,后来使用了2.5.0版本,可以创建工程,但是在进入到工程目录后,再执行grails程序,报错了,步骤如下: 1. g ...

  10. jsp 中实现点击按钮 实现页面跳转到HTML

    <input type ="button" value="跳转" onclick="window.location.href='main.htm ...