JavaScript圖表工具FusionCharts入門(mén)教程(45)：如何使用可拖動(dòng)圖表
FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁(yè)面。它是你值得信賴(lài)的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶(hù)選擇Fusioncharts來(lái)制作專(zhuān)業(yè)的JavaScript圖表。
可拖動(dòng)圖表是一組特殊的圖表，可讓您直觀地操作圖表上的數(shù)據(jù)，然后將其提交回去。這些圖表可大量用于模擬，財(cái)務(wù)計(jì)劃等。可拖動(dòng)的圖表使您可以可視化數(shù)據(jù)變形以更新圖表中的數(shù)字。這些圖表從多系列列，多系列折線(xiàn)和多系列面積圖得出其基本特征。
FusionCharts Suite XT提供以下三種可拖動(dòng)圖表：
- 可拖動(dòng)列2D圖表
- 可拖動(dòng)的2D線(xiàn)圖
- 可拖動(dòng)區(qū)域2D圖表
讓我們創(chuàng)建我們的第一個(gè)可拖動(dòng)的2D柱形圖，顯示Bakersfield Central前五種食品的實(shí)際和估計(jì)庫(kù)存狀態(tài)。
要?jiǎng)?chuàng)建可拖動(dòng)的2D柱形圖，請(qǐng)執(zhí)行以下步驟：
- 在JSON數(shù)據(jù)中，以"<attributeName>": "<value>;"格式設(shè)置屬性及其對(duì)應(yīng)的值。
- 使用type屬性指定圖表類(lèi)型。要呈現(xiàn)可拖動(dòng)的圖表，請(qǐng)?jiān)O(shè)置dragcolumn2D。
- 使用renderAt屬性設(shè)置容器對(duì)象。
- 使用width和height屬性指定圖表的尺寸。
- 使用dataFormat屬性設(shè)置要傳遞給圖表對(duì)象的數(shù)據(jù)類(lèi)型（JSON / XML）。
- 設(shè)置allowDrag屬性以指定表示數(shù)據(jù)集的數(shù)據(jù)圖是否可拖動(dòng)。將此屬性設(shè)置0為禁用可拖動(dòng)的數(shù)據(jù)圖，并將其設(shè)置為1（默認(rèn)）以使其可拖動(dòng)。此屬性屬于dataset對(duì)象，并使數(shù)據(jù)集的所有數(shù)據(jù)圖都可拖動(dòng)。
上面的代碼的可拖動(dòng)的2D柱形圖如下所示：
在上圖中，代表估計(jì)值的數(shù)據(jù)圖是可拖動(dòng)的。
上面的示例還顯示了一個(gè)外部表，其中包含“估計(jì)的需求”數(shù)據(jù)集中的值。圖表上的值一旦更新，表格也將更新。這是通過(guò)使用dataPlotDragEnd事件檢索更新的值來(lái)完成的。觀察到Restore圖表上還有一個(gè)按鈕。單擊恢復(fù)按鈕后，所有數(shù)據(jù)將重置為其原始值。這是使用dataRestored事件完成的。
一旦完成了數(shù)據(jù)的可視更新，就可以將數(shù)據(jù)作為表單數(shù)據(jù)（例如HTML表單）提交回服務(wù)器，或者提交給與圖表在同一頁(yè)面上的JavaScript函數(shù)。然后，這些JavaScript函數(shù)可以處理數(shù)據(jù)并做有需要的事情。
可拖動(dòng)的2D線(xiàn)圖
要渲染可拖動(dòng)的2D折線(xiàn)圖，請(qǐng)將type屬性的值從更改dragcolumn2d為dragline。
該示例將展示蘋(píng)果和三星的季度銷(xiāo)售額。這些指標(biāo)將代表蘋(píng)果和三星第三季度和第四季度的銷(xiāo)售預(yù)測(cè)是可拖動(dòng)的。回想一下，在上面的可拖動(dòng)二維列圖表中，我們已將一個(gè)數(shù)據(jù)集的所有數(shù)據(jù)圖配置為可拖動(dòng)。但是，在此圖表中，我們僅使所有數(shù)據(jù)集的選定數(shù)據(jù)點(diǎn)可拖動(dòng)。
有關(guān)屬性的詳細(xì)列表，請(qǐng)參閱可拖動(dòng)線(xiàn)2D圖表的圖表屬性頁(yè)面。
創(chuàng)建的可拖動(dòng)的2D折線(xiàn)圖用于繪制Apple和Samsung的季度銷(xiāo)售額，如下所示：
要渲染可拖動(dòng)區(qū)域2D圖表，請(qǐng)將type屬性的值從更改dragline為dragarea。其余數(shù)據(jù)結(jié)構(gòu)保持不變。
有關(guān)屬性的詳細(xì)列表，請(qǐng)參見(jiàn)可拖動(dòng)區(qū)域2D圖表的圖表屬性頁(yè)面。
這樣創(chuàng)建的可拖動(dòng)區(qū)域2D圖表如下所示：
現(xiàn)在，讓我們自定義圖表的外觀和屬性。
改變軸線(xiàn)限制默認(rèn)情況下，該圖表根據(jù)提供給它的數(shù)據(jù)計(jì)算y軸的上下限。要使該列采用此軸范圍內(nèi)未涵蓋的值，請(qǐng)使用圖表右上方的菜單按鈕增加或減少限制。
單擊菜單按鈕，將顯示一個(gè)帶有用于增加或減少上限和下限的選項(xiàng)的彈出窗口。
選擇以上任一選項(xiàng)，以使用自動(dòng)計(jì)算的間隔增加或減少圖表限制。
但是，要設(shè)置上限/下限的手動(dòng)值，請(qǐng)單擊限制并直接進(jìn)行編輯。
通過(guò)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ù)圖的最小值，則圖表不會(huì)設(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管理圖表限制的可拖動(dòng)區(qū)域圖表如下所示：
限制數(shù)據(jù)圖相對(duì)于圖表上分隔線(xiàn)的拖動(dòng)，即，可以將數(shù)據(jù)圖配置為在落入分隔線(xiàn)的指定距離內(nèi)時(shí)捕捉到最近的分隔線(xiàn)。
要捕捉到最接近的分割線(xiàn)，請(qǐng)按照以下步驟操作：
- 指定snapToDivOnly屬性以設(shè)置將數(shù)據(jù)點(diǎn)拖到圖表上最接近的分隔線(xiàn)的位置。數(shù)據(jù)點(diǎn)無(wú)法獲取任何兩條分隔線(xiàn)之間的值，因此，它們將始終落在分隔線(xiàn)值上。
- 拖動(dòng)面積圖時(shí)，將其捕捉到圖表上最近的分隔線(xiàn)。為此，只需將snapToDiv屬性設(shè)置為1。此屬性與snapToDivOnly屬性之間的區(qū)別在于，該屬性snapToDivOnly（設(shè)置為1時(shí)）允許您將數(shù)據(jù)點(diǎn)拖到div線(xiàn)上。但是，使用此屬性，您可以創(chuàng)建“粘性”類(lèi)型的接口，以便當(dāng)數(shù)據(jù)點(diǎn)放置在分隔線(xiàn)附近時(shí)，它將采用分隔線(xiàn)值。但是，如果將其放在更遠(yuǎn)的位置，它將保持原樣。
- 設(shè)置snapToDivRelaxation屬性以指定距數(shù)據(jù)點(diǎn)表現(xiàn)為粘性的分隔線(xiàn)的距離（以像素為單位）。 注意：僅當(dāng)該snapToDiv屬性設(shè)置為時(shí)，此屬性才有效1。
- 將doNotSnap屬性設(shè)置為1，這將不允許數(shù)據(jù)點(diǎn)粘在div線(xiàn)上。將此屬性設(shè)置為0將允許他們堅(jiān)持。
{
"chart": {
"snapToDiv": "1",
"snapToDivRelaxation": "5"
}
}
配置為捕捉到最接近的div間隔的可拖動(dòng)柱形圖如下所示：
可以將可拖動(dòng)的2D柱形圖表配置為檢索JSON數(shù)據(jù)并將其呈現(xiàn)在警報(bào)窗口中。getJSONData需要在現(xiàn)有圖表上調(diào)用該函數(shù)。它獲取以JSON格式在圖表上設(shè)置的數(shù)據(jù)。在沒(méi)有數(shù)據(jù)集的圖表上調(diào)用此函數(shù)將返回一個(gè)空{(diào) }對(duì)象。
檢索數(shù)據(jù)集的圖表如下所示：
- getXMLData-設(shè)置此功能可獲取以XML格式在圖表上設(shè)置的數(shù)據(jù)。需要在現(xiàn)有圖表上調(diào)用此函數(shù)。如果在未設(shè)置數(shù)據(jù)的圖表上調(diào)用此函數(shù)，它將返回一個(gè)空<chart />元素作為字符串。
- getCSVData-設(shè)置此功能以獲取在CSV格式的圖表上設(shè)置的數(shù)據(jù)。返回的數(shù)據(jù)是已提供給圖表的最可能的逗號(hào)分隔值表示形式。導(dǎo)出的數(shù)據(jù)不包含在圖表上設(shè)置的任何功能或外觀屬性。
檢索數(shù)據(jù)使用getDataWithID（）函數(shù)
該getDataWithID()函數(shù)返回一個(gè)三維數(shù)組，其中包含數(shù)據(jù)和數(shù)據(jù)集ID。一旦獲得了圖表的參考，就可以調(diào)用該函數(shù)來(lái)檢索數(shù)據(jù)。
配置為使用該getDataWithID()函數(shù)檢索數(shù)據(jù)的可拖動(dòng)柱形圖如下所示：
該getDataWithID()函數(shù)返回的數(shù)據(jù)未經(jīng)任何編輯。
該方法的關(guān)鍵指標(biāo)是：- 數(shù)組的[0,0]索引為空。
- 返回的數(shù)組中的第一行包含水平（順序）放置的每個(gè)數(shù)據(jù)集的系列名稱(chēng)。
- 返回的數(shù)組的第一列包含所有類(lèi)別的標(biāo)簽。
- 其余的列映射到它們各自的類(lèi)別和數(shù)據(jù)集。對(duì)于每個(gè)數(shù)據(jù)，將返回其ID和圖表上的最后更新值。在我們的示例中，由于我們沒(méi)有在圖表上直觀地更改任何數(shù)據(jù)，因此它顯示的是原始數(shù)據(jù)。
該getData()函數(shù)與該函數(shù)相似，不同之getDataWithID()處在于它僅返回圖表上數(shù)據(jù)的更新值，而不返回其ID。
因此，該getData()函數(shù)返回的數(shù)組是一個(gè)二維數(shù)組，其中每個(gè)數(shù)據(jù)單元格僅包含表示圖表上數(shù)據(jù)最終值的數(shù)值。
配置為使用該getData()方法檢索數(shù)據(jù)的拖動(dòng)柱形圖如下所示：
想要購(gòu)買(mǎi)FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
QQ交談
在線(xiàn)咨詢(xún)
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線(xiàn)