JavaScript如何使用圖表工具FusionCharts建立雷達圖

roffey發表於2021-04-25

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最新版【慧都網】

此圖表型別屬於PowerCharts XT。

雷達圖(也稱為蜘蛛圖)是對承載多個維度的資料的視覺化解釋。對於放射狀的網格狀結構,該圖表在其軸上顯示不同類別的值。雷達圖主要用作資料比較工具,以在各個方面直觀地關聯和對比實體,例如相對於基準的增長,在多個標準上的進展等。可以為單個資料集繪製雷達圖(單系列雷達圖)或多個資料集(多系列雷達圖)。

雷達圖的常見應用領域包括:

  • 經營業績
  • 質量分析
  • 產品對比

雷達圖

注意:單擊下面的氣泡以瞭解有關不同圖表元件的更多資訊。

例如,我們將建立我們的第一個雷達圖,該圖根據五個類別繪製客戶反饋調查的結果。雷達圖將用於比較每個類別的結果,並確定需要改進的服務。

要建立雷達圖,請執行以下步驟:

  • 使用type屬性指定圖表型別。要繪製雷達圖,請設定radar。
  • 使用renderAt屬性設定容器物件。
  • 使用width和height屬性指定圖表的尺寸。
  • 使用dataFormat屬性設定要傳遞給圖表物件的資料型別(JSON / XML)。

在JSON資料中:

  • 以"<attributeName>": "<value>"格式設定屬性及其相應的值。
  • 使用label屬性為資料項指定標籤。該屬性屬於category物件,而物件又屬於categories物件。
  • 使用物件value內的屬性指定資料項的值data。
  • 使用seriesname屬性為資料集指定系列的名稱。此屬性屬於dataset物件。

有關屬性的詳細列表,請參閱多系列雷達圖表的圖表屬性頁面。

建立的雷達圖將如下所示:

現在,我們將為商店中五個關鍵部門的當月預算分析建立一個多系列雷達圖。對於每個部門,我們將繪製分配的預算和實際成本。這將有助於確定月初預算估算的準確性-預算是分配過多,分配不足還是正確分配。

建立多系列雷達圖的資料結構與雷達圖相同。

這樣建立的多系列雷達圖如下所示:



如果您對該圖表控制元件感興趣,可以在慧都網免費下載最新試用版,歡迎加入圖表控制元件QQ交流群:740060302

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69995027/viewspace-2769738/,如需轉載,請註明出處,否則將追究法律責任。

相關文章