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();
}