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來制作專業的JavaScript圖表。
可拖動圖表是一組特殊的圖表，可讓您直觀地操作圖表上的數據，然后將其提交回去。這些圖表可大量用于模擬，財務計劃等。可拖動的圖表使您可以可視化數據變形以更新圖表中的數字。這些圖表從多系列列，多系列折線和多系列面積圖得出其基本特征。
FusionCharts Suite XT提供以下三種可拖動圖表：
- 可拖動列2D圖表
- 可拖動的2D線圖
- 可拖動區域2D圖表
讓我們創建我們的第一個可拖動的2D柱形圖，顯示Bakersfield Central前五種食品的實際和估計庫存狀態。
要創建可拖動的2D柱形圖，請執行以下步驟：
- 在JSON數據中，以"<attributeName>": "<value>"格式設置屬性及其對應的值。
- 使用type屬性指定圖表類型。要呈現可拖動的圖表，請設置dragcolumn2D。
- 使用renderAt屬性設置容器對象。
- 使用width和height屬性指定圖表的尺寸。
- 使用dataFormat屬性設置要傳遞給圖表對象的數據類型（JSON / XML）。
- 設置allowDrag屬性以指定表示數據集的數據圖是否可拖動。將此屬性設置0為禁用可拖動的數據圖，并將其設置為1（默認）以使其可拖動。此屬性屬于dataset對象，并使數據集的所有數據圖都可拖動。
上面的代碼的可拖動的2D柱形圖如下所示：
在上圖中，代表估計值的數據圖是可拖動的。
上面的示例還顯示了一個外部表，其中包含“估計的需求”數據集中的值。圖表上的值一旦更新，表格也將更新。這是通過使用dataPlotDragEnd事件檢索更新的值來完成的。觀察到Restore圖表上還有一個按鈕。單擊恢復按鈕后，所有數據將重置為其原始值。這是使用dataRestored事件完成的。
一旦完成了數據的可視更新，就可以將數據作為表單數據（例如HTML表單）提交回服務器，或者提交給與圖表在同一頁面上的JavaScript函數。然后，這些JavaScript函數可以處理數據并做有需要的事情。
可拖動的2D線圖
要渲染可拖動的2D折線圖，請將type屬性的值從更改dragcolumn2d為dragline。
該示例將展示蘋果和三星的季度銷售額。這些指標將代表蘋果和三星第三季度和第四季度的銷售預測是可拖動的。回想一下，在上面的可拖動二維列圖表中，我們已將一個數據集的所有數據圖配置為可拖動。但是，在此圖表中，我們僅使所有數據集的選定數據點可拖動。
有關屬性的詳細列表，請參閱可拖動線2D圖表的圖表屬性頁面。
創建的可拖動的2D折線圖用于繪制Apple和Samsung的季度銷售額，如下所示：
要渲染可拖動區域2D圖表，請將type屬性的值從更改dragline為dragarea。其余數據結構保持不變。
有關屬性的詳細列表，請參見可拖動區域2D圖表的圖表屬性頁面。
這樣創建的可拖動區域2D圖表如下所示：
現在，讓我們自定義圖表的外觀和屬性。
改變軸線限制默認情況下，該圖表根據提供給它的數據計算y軸的上下限。要使該列采用此軸范圍內未涵蓋的值，請使用圖表右上方的菜單按鈕增加或減少限制。
單擊菜單按鈕，將顯示一個帶有用于增加或減少上限和下限的選項的彈出窗口。
選擇以上任一選項，以使用自動計算的間隔增加或減少圖表限制。
但是，要設置上限/下限的手動值，請單擊限制并直接進行編輯。
通過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格式在圖表上設置的數據。在沒有數據集的圖表上調用此函數將返回一個空{ }對象。
檢索數據集的圖表如下所示：
- getXMLData-設置此功能可獲取以XML格式在圖表上設置的數據。需要在現有圖表上調用此函數。如果在未設置數據的圖表上調用此函數，它將返回一個空<chart />元素作為字符串。
- getCSVData-設置此功能以獲取在CSV格式的圖表上設置的數據。返回的數據是已提供給圖表的最可能的逗號分隔值表示形式。導出的數據不包含在圖表上設置的任何功能或外觀屬性。
檢索數據使用getDataWithID（）函數
該getDataWithID()函數返回一個三維數組，其中包含數據和數據集ID。一旦獲得了圖表的參考，就可以調用該函數來檢索數據。
配置為使用該getDataWithID()函數檢索數據的可拖動柱形圖如下所示：
該getDataWithID()函數返回的數據未經任何編輯。
該方法的關鍵指標是：- 數組的[0,0]索引為空。
- 返回的數組中的第一行包含水平（順序）放置的每個數據集的系列名稱。
- 返回的數組的第一列包含所有類別的標簽。
- 其余的列映射到它們各自的類別和數據集。對于每個數據，將返回其ID和圖表上的最后更新值。在我們的示例中，由于我們沒有在圖表上直觀地更改任何數據，因此它顯示的是原始數據。
該getData()函數與該函數相似，不同之getDataWithID()處在于它僅返回圖表上數據的更新值，而不返回其ID。
因此，該getData()函數返回的數組是一個二維數組，其中每個數據單元格僅包含表示圖表上數據最終值的數值。
配置為使用該getData()方法檢索數據的拖動柱形圖如下所示：
想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線