Open Flash Chart 之线图(二)
上一节在研究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 之线图(二)的更多相关文章
- Open Flash Chart 之线图
天公司要求开发一个曲线图,简单看了一下之前公司的一个系统,发现一个曲线图效果还不错,查了一下叫OpenFlashChart,还是很不错的,很多人用.研究了一下,发现还不错,特地写了个DEMO测试下. ...
- 关于k Line Chart (k线图)
K Line Chart python实现k线图的代码,之前找过matplotlib中文文档但是画k线图的finance方法已经弃用了.所以自己在网上搜寻一下加上改编,很好的实现出k线图, 代码如下: ...
- R语言-线图(二)
1.线图示例 plot()为高水平作图命令,axis().lines().legend()都为低水平作图命令 > rain<-read.csv("cityrain.csv&q ...
- 推荐几款web站点JS(JQeury)图表(饼图,柱图,线图)
一 Google Chart Tools 官网:https://developers.google.com/chart/ 谷歌图表工具提供了一个完美的方式形象化您的网站上的数据.从简单到复杂的层次结构 ...
- PHP使用HighChart生成股票K线图详解
本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...
- 一起来玩echarts系列(一)------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- K线图学习
本博文(适合入门的股民朋友)内容来自网络,股市有风险,入市需谨慎 一.起源 K线图(Candlestick Charts)又称蜡烛图.日本线.阴阳线.棒线等,常用说法是“K线”,起源于日本十八世纪德川 ...
- Wijmo金融图表系列之平均K线图&砖形图
2015年7月16日将会发布有史以来最令人兴奋的控件-Wijmo 金融图表,它的一体化设计为单个自定义集合提供了所有主要的金融图表,这是市场上的其他控件都不具备的独一无二的好处.它像Wijmo其他任意 ...
- Highcharts candlestick(K线图)案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- @Component、@Service、@Constroller
@Component.@Service.@Constroller,@Repository,它们分别用于软件系统的不同层次: @Component 是一个泛化的概念,仅仅表示一个组件 (Bean) ,可 ...
- 10. Regular Expression Matching *HARD*
Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...
- java redis client jedis 测试
package cn.byref.demo1; import java.util.HashMap; import java.util.List; import java.util.Map; impor ...
- 信号处理函数的返回sigsetjmp/siglongjmp
由于在信号处理期间自动屏蔽了正在被处理的信号,而使用setjmp/longjmp跳出信号处理程序时又不会自动将 信号屏蔽码修改会原来的屏蔽码,从而引起该信号被永久屏蔽. 可以使用sigsetjmp/s ...
- poj2892
题解: 答案=后缀-前缀-1 如果被轰了,那么就时0 在一开始加入0,n+1,保证有前缀后缀 代码: #include<cstdio> #include<cmath> #inc ...
- Flask初级(六)flash模板渲染
Project name :Flask_Plan templates:templates static:static 继续上篇的模板 我们已经可以静态调用模板,包括继承模板,保证了页面的一致性,但是我 ...
- 大数据技术Hadoop面试题
1. 下面哪个程序负责 HDFS 数据存储.答案C datanode a)NameNodeb)Jobtrackerc)Datanode d)secondaryNameNodee)tasktracker ...
- 《Python》 生成器和列表推导式
一.初识生成器: 生成器就是自己用Python代码写的迭代器,生成器的本质就是迭代器. 1.Python中提供的生成器: 1.生成器函数: 使用yield语句而不是return语句返回结果.yield ...
- 1.2.1 Elevator
Elevator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem De ...
- 日志的处理 —— 使用 log4j
通过 log4j,日志信息不仅打印到 console,而且输出到指定文件,根据配置信息: <dependency> <groupId>log4j</groupId> ...