国产99精,国产乱伦子,超碰97干

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

原創|行業資訊|編輯：楊鵬連|2021-02-04 10:07:26.260|閱讀 253 次

概述：可拖動圖表是一組特殊的圖表，可讓您直觀地操作圖表上的數據，然后將其提交回去。這些圖表可大量用于模擬，財務計劃等。

相關鏈接：

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來制作專業的JavaScript圖表。

點擊下載FusionCharts最新版

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

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

可拖動列2D圖表
可拖動的2D線圖
可拖動區域2D圖表

可拖動的2D柱形圖

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

要創建可拖動的2D柱形圖，請執行以下步驟：

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

有關屬性的詳細列表，請參見可拖動2D柱形圖的圖表屬性頁面。

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

在上圖中，代表估計值的數據圖是可拖動的。

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

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

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

可拖動的2D線圖

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

該示例將展示蘋果和三星的季度銷售額。這些指標將代表蘋果和三星第三季度和第四季度的銷售預測是可拖動的。回想一下，在上面的可拖動二維列圖表中，我們已將一個數據集的所有數據圖配置為可拖動。但是，在此圖表中，我們僅使所有數據集的選定數據點可拖動。

有關屬性的詳細列表，請參閱可拖動線2D圖表的圖表屬性頁面。

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

可拖動區域2D圖表

要渲染可拖動區域2D圖表，請將type屬性的值從更改dragline為dragarea。其余數據結構保持不變。

有關屬性的詳細列表，請參見可拖動區域2D圖表的圖表屬性頁面。

這樣創建的可拖動區域2D圖表如下所示：

現在，讓我們自定義圖表的外觀和屬性。

改變軸線限制

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

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

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

??′??1è?′é?????
但是，要設置上限/下限的手動值，請單擊限制并直接進行編輯。

如果輸入的限制值不能被圖表接受，則該值將變為紅色，表明該值不能被接受，如下所示：

管理使用JavaScript API圖極限

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

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

請參閱下面給出的代碼：

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管理圖表限制的可拖動區域圖表如下所示：

捕捉到最近的分區線

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

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

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

請參閱下面給出的代碼：

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

配置為捕捉到最接近的div間隔的可拖動柱形圖如下所示：

檢索數據集

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

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

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

其余數據結構與JSON格式相同。

檢索數據使用getDataWithID（）函數

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