JavaScript圖表工具FusionCharts入門教程(48)：雷達(dá)圖

---

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頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。

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

此圖表類型屬于PowerCharts XT。

雷達(dá)圖（也稱為蜘蛛圖）是對(duì)承載多個(gè)維度的數(shù)據(jù)的可視化解釋。對(duì)于放射狀的網(wǎng)格狀結(jié)構(gòu)，該圖表在其軸上顯示不同類別的值。雷達(dá)圖主要用作數(shù)據(jù)比較工具，以在各個(gè)方面直觀地關(guān)聯(lián)和對(duì)比實(shí)體，例如相對(duì)于基準(zhǔn)的增長(zhǎng)，在多個(gè)標(biāo)準(zhǔn)上的進(jìn)展等。可以為單個(gè)數(shù)據(jù)集繪制雷達(dá)圖（單系列雷達(dá)圖）或多個(gè)數(shù)據(jù)集（多系列雷達(dá)圖）。

雷達(dá)圖的常見應(yīng)用領(lǐng)域包括：

• 經(jīng)營(yíng)業(yè)績(jī)
• 質(zhì)量分析
• 產(chǎn)品對(duì)比

雷達(dá)圖

注意：?jiǎn)螕粝旅娴臍馀菀粤私庥嘘P(guān)不同圖表組件的更多信息。

例如，我們將創(chuàng)建我們的第一個(gè)雷達(dá)圖，該圖根據(jù)五個(gè)類別繪制客戶反饋調(diào)查的結(jié)果。雷達(dá)圖將用于比較每個(gè)類別的結(jié)果，并確定需要改進(jìn)的服務(wù)。

要?jiǎng)?chuàng)建雷達(dá)圖，請(qǐng)執(zhí)行以下步驟：

• 使用type屬性指定圖表類型。要繪制雷達(dá)圖，請(qǐng)?jiān)O(shè)置radar。
• 使用renderAt屬性設(shè)置容器對(duì)象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設(shè)置要傳遞給圖表對(duì)象的數(shù)據(jù)類型（JSON / XML）。

在JSON數(shù)據(jù)中：

• 以"<attributeName>": "<value>"格式設(shè)置屬性及其相應(yīng)的值。
• 使用label屬性為數(shù)據(jù)項(xiàng)指定標(biāo)簽。該屬性屬于category對(duì)象，而對(duì)象又屬于categories對(duì)象。
• 使用對(duì)象value內(nèi)的屬性指定數(shù)據(jù)項(xiàng)的值data。
• 使用seriesname屬性為數(shù)據(jù)集指定系列的名稱。此屬性屬于dataset對(duì)象。

有關(guān)屬性的詳細(xì)列表，請(qǐng)參閱多系列雷達(dá)圖表的圖表屬性頁面。

創(chuàng)建的雷達(dá)圖將如下所示：

現(xiàn)在，我們將為商店中五個(gè)關(guān)鍵部門的當(dāng)月預(yù)算分析創(chuàng)建一個(gè)多系列雷達(dá)圖。對(duì)于每個(gè)部門，我們將繪制分配的預(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)品信息請(qǐng)點(diǎn)擊