JavaScript圖表工具FusionCharts入門教程(48):雷達(dá)圖
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圖表。
此圖表類型屬于PowerCharts XT。
雷達(dá)圖(也稱為蜘蛛圖)是對承載多個維度的數(shù)據(jù)的可視化解釋。對于放射狀的網(wǎng)格狀結(jié)構(gòu),該圖表在其軸上顯示不同類別的值。雷達(dá)圖主要用作數(shù)據(jù)比較工具,以在各個方面直觀地關(guān)聯(lián)和對比實(shí)體,例如相對于基準(zhǔn)的增長,在多個標(biāo)準(zhǔn)上的進(jìn)展等??梢詾閱蝹€數(shù)據(jù)集繪制雷達(dá)圖(單系列雷達(dá)圖)或多個數(shù)據(jù)集(多系列雷達(dá)圖)。
雷達(dá)圖的常見應(yīng)用領(lǐng)域包括:
- 經(jīng)營業(yè)績
- 質(zhì)量分析
- 產(chǎn)品對比
注意:單擊下面的氣泡以了解有關(guān)不同圖表組件的更多信息。
例如,我們將創(chuàng)建我們的第一個雷達(dá)圖,該圖根據(jù)五個類別繪制客戶反饋調(diào)查的結(jié)果。雷達(dá)圖將用于比較每個類別的結(jié)果,并確定需要改進(jìn)的服務(wù)。
要創(chuàng)建雷達(dá)圖,請執(zhí)行以下步驟:- 使用type屬性指定圖表類型。要繪制雷達(dá)圖,請?jiān)O(shè)置radar。
- 使用renderAt屬性設(shè)置容器對象。
- 使用width和height屬性指定圖表的尺寸。
- 使用dataFormat屬性設(shè)置要傳遞給圖表對象的數(shù)據(jù)類型(JSON / XML)。
- 以"<attributeName>": "<value>"格式設(shè)置屬性及其相應(yīng)的值。
- 使用label屬性為數(shù)據(jù)項(xiàng)指定標(biāo)簽。該屬性屬于category對象,而對象又屬于categories對象。
- 使用對象value內(nèi)的屬性指定數(shù)據(jù)項(xiàng)的值data。
- 使用seriesname屬性為數(shù)據(jù)集指定系列的名稱。此屬性屬于dataset對象。
創(chuàng)建的雷達(dá)圖將如下所示:
現(xiàn)在,我們將為商店中五個關(guān)鍵部門的當(dāng)月預(yù)算分析創(chuàng)建一個多系列雷達(dá)圖。對于每個部門,我們將繪制分配的預(yù)算和實(shí)際成本。這將有助于確定月初預(yù)算估算的準(zhǔn)確性-預(yù)算是分配過多,分配不足還是正確分配。
創(chuàng)建多系列雷達(dá)圖的數(shù)據(jù)結(jié)構(gòu)與雷達(dá)圖相同。這樣創(chuàng)建的多系列雷達(dá)圖如下所示:
想要購買FusionCharts Suite XT正版授權(quán),或了解更多產(chǎn)品信息請點(diǎn)擊【咨詢在線客服】