JavaScript圖表工具FusionCharts入門教程(45)：如何使用可拖動圖表

---

FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。

點(diǎn)擊下載FusionCharts最新版

可拖動圖表是一組特殊的圖表，可讓您直觀地操作圖表上的數(shù)據(jù)，然后將其提交回去。這些圖表可大量用于模擬，財務(wù)計劃等?？赏蟿拥膱D表使您可以可視化數(shù)據(jù)變形以更新圖表中的數(shù)字。這些圖表從多系列列，多系列折線和多系列面積圖得出其基本特征。

FusionCharts Suite XT提供以下三種可拖動圖表：

• 可拖動列2D圖表
• 可拖動的2D線圖
• 可拖動區(qū)域2D圖表

可拖動的2D柱形圖

讓我們創(chuàng)建我們的第一個可拖動的2D柱形圖，顯示Bakersfield Central前五種食品的實際和估計庫存狀態(tài)。

要創(chuàng)建可拖動的2D柱形圖，請執(zhí)行以下步驟：

• 在JSON數(shù)據(jù)中，以"<attributeName>": "<value>"格式設(shè)置屬性及其對應(yīng)的值。
• 使用type屬性指定圖表類型。要呈現(xiàn)可拖動的圖表，請設(shè)置dragcolumn2D。
• 使用renderAt屬性設(shè)置容器對象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設(shè)置要傳遞給圖表對象的數(shù)據(jù)類型（JSON / XML）。
• 設(shè)置allowDrag屬性以指定表示數(shù)據(jù)集的數(shù)據(jù)圖是否可拖動。將此屬性設(shè)置0為禁用可拖動的數(shù)據(jù)圖，并將其設(shè)置為1（默認(rèn)）以使其可拖動。此屬性屬于dataset對象，并使數(shù)據(jù)集的所有數(shù)據(jù)圖都可拖動。

有關(guān)屬性的詳細(xì)列表，請參見可拖動2D柱形圖的圖表屬性頁面。

上面的代碼的可拖動的2D柱形圖如下所示：

在上圖中，代表估計值的數(shù)據(jù)圖是可拖動的。

上面的示例還顯示了一個外部表，其中包含“估計的需求”數(shù)據(jù)集中的值。圖表上的值一旦更新，表格也將更新。這是通過使用dataPlotDragEnd事件檢索更新的值來完成的。

觀察到Restore圖表上還有一個按鈕。單擊恢復(fù)按鈕后，所有數(shù)據(jù)將重置為其原始值。這是使用dataRestored事件完成的。

一旦完成了數(shù)據(jù)的可視更新，就可以將數(shù)據(jù)作為表單數(shù)據(jù)（例如HTML表單）提交回服務(wù)器，或者提交給與圖表在同一頁面上的JavaScript函數(shù)。然后，這些JavaScript函數(shù)可以處理數(shù)據(jù)并做有需要的事情。

可拖動的2D線圖

要渲染可拖動的2D折線圖，請將type屬性的值從更改dragcolumn2d為dragline。

該示例將展示蘋果和三星的季度銷售額。這些指標(biāo)將代表蘋果和三星第三季度和第四季度的銷售預(yù)測是可拖動的?；叵胍幌?，在上面的可拖動二維列圖表中，我們已將一個數(shù)據(jù)集的所有數(shù)據(jù)圖配置為可拖動。但是，在此圖表中，我們僅使所有數(shù)據(jù)集的選定數(shù)據(jù)點(diǎn)可拖動。

有關(guān)屬性的詳細(xì)列表，請參閱可拖動線2D圖表的圖表屬性頁面。

創(chuàng)建的可拖動的2D折線圖用于繪制Apple和Samsung的季度銷售額，如下所示：

可拖動區(qū)域2D圖表

要渲染可拖動區(qū)域2D圖表，請將type屬性的值從更改dragline為dragarea。其余數(shù)據(jù)結(jié)構(gòu)保持不變。

有關(guān)屬性的詳細(xì)列表，請參見可拖動區(qū)域2D圖表的圖表屬性頁面。

這樣創(chuàng)建的可拖動區(qū)域2D圖表如下所示：

現(xiàn)在，讓我們自定義圖表的外觀和屬性。

改變軸線限制

默認(rèn)情況下，該圖表根據(jù)提供給它的數(shù)據(jù)計算y軸的上下限。要使該列采用此軸范圍內(nèi)未涵蓋的值，請使用圖表右上方的菜單按鈕增加或減少限制。

單擊菜單按鈕，將顯示一個帶有用于增加或減少上限和下限的選項的彈出窗口。

選擇以上任一選項，以使用自動計算的間隔增加或減少圖表限制。

但是，要設(shè)置上限/下限的手動值，請單擊限制并直接進(jìn)行編輯。

如果輸入的限制值不能被圖表接受，則該值將變?yōu)榧t色，表明該值不能被接受，如下所示： 管理使用JavaScript API圖極限

通過FusionCharts Suite XT，您可以使用JavaScript API設(shè)置和檢索圖表的上限和下限。下面列出了一些設(shè)置和檢索圖表限制的方法：

• setUpperLimit()-設(shè)置此屬性以指定圖表的新上限。它以限值的數(shù)值作為參數(shù)。如果該值大于圖表的所有數(shù)據(jù)圖的最大值，則圖表將設(shè)置圖表的新上限并返回true。如果該值小于數(shù)據(jù)圖的最大值，則該圖表不設(shè)置上限，并返回false。
• setLowerLimit()-設(shè)置此屬性以指定圖表的新下限。它以限值的數(shù)值作為參數(shù)。如果該值小于圖表所有數(shù)據(jù)圖的最小值，則圖表將設(shè)置圖表的新下限并返回true。如果該值大于數(shù)據(jù)圖的最小值，則圖表不會設(shè)置下限，并返回false。
• getUpperLimit() -設(shè)置此屬性可返回圖表的當(dāng)前上限。
• getLowerLimit() -設(shè)置此屬性可返回圖表的當(dāng)前下限。

請參閱下面給出的代碼：

events: {
    'rendered': function(evtObj, argObj) {
        var chartIns = evtObj.sender,
            chartMaxLimit = chartIns.getUpperLimit(),
            chartMinLimit = chartIns.getLowerLimit();
            document.getElementById('max-limit').value = chartMaxLimit;
            document.getElementById('min-limit').value = chartMinLimit;
    },
    'beforeRender': function(evt, args) {
        if (!document.getElementById('controllers')) {
            var controllers = document.createElement('div'),
            chartRef = evt.sender,
            maxBtn,
            minBtn,
            maxTxtFld,
            minTxtFld,

            setMaxLimit = function() {
                var maxLimit = maxTxtFld.value,
                crntLimit = chartRef && chartRef.getUpperLimit(),
                status;
                if (maxLimit != crntLimit) {
                    status = chartRef && chartRef.setUpperLimit(maxLimit);
                    if (status) {
                        alert('Max limit updated successfully');
                    } else {
                        maxTxtFld.value = crntLimit;
                        alert('Max limit could not be updated!')
                    }
                }
            },
            setMinLimit = function() {
                var minLimit = minTxtFld.value,
                crntLimit = chartRef && chartRef.getLowerLimit(),
                status;
                if (minLimit != crntLimit) {
                    status = chartRef && chartRef.setLowerLimit(minLimit);
                    if (status) {
                        alert('Min limit updated successfully');
                    } else {
                        minTxtFld.value = crntLimit;
                        alert('Min limit could not be updated!')
                    }
                }
            };
            controllers.setAttribute('id', 'controllers');

            // Create elements inside div
            controllers.innerHTML = '<div id="controllers" style="margin-left: 20px;font-weight:bold;"><p>Reset values to update limits.<p><div style="padding-top: 10px;"><span><input type="text" id="max-limit" style="max-width: 100px;font-weight: bold; margin-bottom:0px !important;"/><input type="button" id="max-btn" style="font-size: 16px; margin-left: 5px; margin-top: 0px; padding: 2px 5px; width:120px;" value="Set Max Value"/></span></div><div style="padding-top: 10px;"><span><input type="text" id="min-limit" style="max-width: 100px;font-weight: bold; margin-bottom:0px !important;"/><input type="button" id="min-btn" style="font-size: 16px; margin-left: 5px; margin-top: 0px; padding: 2px 5px; width:120px;" value="Set Min Value"/></span></div></div>';
            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);\\
            maxBtn = document.getElementById('max-btn');
            minBtn = document.getElementById('min-btn');
            maxTxtFld = document.getElementById('max-limit');
            minTxtFld = document.getElementById('min-limit');

            //Add listener to buttons
            if (maxBtn.addEventListener) {
                maxBtn.addEventListener("click", setMaxLimit);
                minBtn.addEventListener("click", setMinLimit);
            } else {
                maxBtn.onclick && maxBtn.onclick(setMaxLimit);
                minBtn.onclick && minBtn.onclick(setMinLimit);
            }
        }
    }
}

配置為使用JavaScript API管理圖表限制的可拖動區(qū)域圖表如下所示： 捕捉到最近的分區(qū)線

限制數(shù)據(jù)圖相對于圖表上分隔線的拖動，即，可以將數(shù)據(jù)圖配置為在落入分隔線的指定距離內(nèi)時捕捉到最近的分隔線。

要捕捉到最接近的分割線，請按照以下步驟操作：

• 指定snapToDivOnly屬性以設(shè)置將數(shù)據(jù)點(diǎn)拖到圖表上最接近的分隔線的位置。數(shù)據(jù)點(diǎn)無法獲取任何兩條分隔線之間的值，因此，它們將始終落在分隔線值上。
• 拖動面積圖時，將其捕捉到圖表上最近的分隔線。為此，只需將snapToDiv屬性設(shè)置為1。此屬性與snapToDivOnly屬性之間的區(qū)別在于，該屬性snapToDivOnly（設(shè)置為1時）允許您將數(shù)據(jù)點(diǎn)拖到div線上。但是，使用此屬性，您可以創(chuàng)建“粘性”類型的接口，以便當(dāng)數(shù)據(jù)點(diǎn)放置在分隔線附近時，它將采用分隔線值。但是，如果將其放在更遠(yuǎn)的位置，它將保持原樣。
• 設(shè)置snapToDivRelaxation屬性以指定距數(shù)據(jù)點(diǎn)表現(xiàn)為粘性的分隔線的距離（以像素為單位）。 注意：僅當(dāng)該snapToDiv屬性設(shè)置為時，此屬性才有效1。
• 將doNotSnap屬性設(shè)置為1，這將不允許數(shù)據(jù)點(diǎn)粘在div線上。將此屬性設(shè)置為0將允許他們堅持。

請參閱下面給出的代碼：

{
    "chart": {
        "snapToDiv": "1",
        "snapToDivRelaxation": "5"
    }
}

配置為捕捉到最接近的div間隔的可拖動柱形圖如下所示：
檢索數(shù)據(jù)集

可以將可拖動的2D柱形圖表配置為檢索JSON數(shù)據(jù)并將其呈現(xiàn)在警報窗口中。getJSONData需要在現(xiàn)有圖表上調(diào)用該函數(shù)。它獲取以JSON格式在圖表上設(shè)置的數(shù)據(jù)。在沒有數(shù)據(jù)集的圖表上調(diào)用此函數(shù)將返回一個空{(diào) }對象。
檢索數(shù)據(jù)集的圖表如下所示：

可拖動的2D柱形圖表也可以配置為檢索XML和CSV格式的數(shù)據(jù)。檢索它們的功能是：

• getXMLData-設(shè)置此功能可獲取以XML格式在圖表上設(shè)置的數(shù)據(jù)。需要在現(xiàn)有圖表上調(diào)用此函數(shù)。如果在未設(shè)置數(shù)據(jù)的圖表上調(diào)用此函數(shù)，它將返回一個空<chart />元素作為字符串。
• getCSVData-設(shè)置此功能以獲取在CSV格式的圖表上設(shè)置的數(shù)據(jù)。返回的數(shù)據(jù)是已提供給圖表的最可能的逗號分隔值表示形式。導(dǎo)出的數(shù)據(jù)不包含在圖表上設(shè)置的任何功能或外觀屬性。

其余數(shù)據(jù)結(jié)構(gòu)與JSON格式相同。

檢索數(shù)據(jù)使用getDataWithID（）函數(shù)

該getDataWithID()函數(shù)返回一個三維數(shù)組，其中包含數(shù)據(jù)和數(shù)據(jù)集ID。一旦獲得了圖表的參考，就可以調(diào)用該函數(shù)來檢索數(shù)據(jù)。
配置為使用該getDataWithID()函數(shù)檢索數(shù)據(jù)的可拖動柱形圖如下所示：

該getDataWithID()函數(shù)返回的數(shù)據(jù)未經(jīng)任何編輯。

該方法的關(guān)鍵指標(biāo)是：

• 數(shù)組的[0,0]索引為空。
• 返回的數(shù)組中的第一行包含水平（順序）放置的每個數(shù)據(jù)集的系列名稱。
• 返回的數(shù)組的第一列包含所有類別的標(biāo)簽。
• 其余的列映射到它們各自的類別和數(shù)據(jù)集。對于每個數(shù)據(jù)，將返回其ID和圖表上的最后更新值。在我們的示例中，由于我們沒有在圖表上直觀地更改任何數(shù)據(jù)，因此它顯示的是原始數(shù)據(jù)。

下面給出的是此函數(shù)返回的三維數(shù)組的結(jié)構(gòu)： 檢索數(shù)據(jù)使用的getData（）函數(shù)

該getData()函數(shù)與該函數(shù)相似，不同之getDataWithID()處在于它僅返回圖表上數(shù)據(jù)的更新值，而不返回其ID。

因此，該getData()函數(shù)返回的數(shù)組是一個二維數(shù)組，其中每個數(shù)據(jù)單元格僅包含表示圖表上數(shù)據(jù)最終值的數(shù)值。

配置為使用該getData()方法檢索數(shù)據(jù)的拖動柱形圖如下所示：

---

想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊【咨詢在線客服】