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