JavaScript如何使用圖表工具FusionCharts建立雷達圖
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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 如何建立JavaScript圖表工具-金字塔圖JavaScript
- 【譯】使用javascript建立圖JavaScript
- 【譯】使用 JavaScript 建立圖JavaScript
- 繪製雷達圖
- Python 畫雷達圖Python
- canvas 實現雷達圖Canvas
- 【matplotlib 實戰】--雷達圖
- Canvas 繪製雷達圖Canvas
- chart.js雷達圖JS
- 雷達圖繪製軟體那個專業,怎麼畫雷達圖
- python 畫雷達回波PPI圖Python
- 【圖解 cartographer】 之雷達模型CastRay圖解模型AST
- WPF 製作雷達掃描圖
- Web 前端實戰(三):雷達圖Web前端
- 手動擼個Android雷達圖(蜘蛛網圖)RadarViewAndroidView
- 使用者PHP圖表包裝程式建立漂亮的圖表的方法PHP
- 如何使用 Javascript 將圖示字型渲染為圖片JavaScript
- Qt QChart 建立圖表QT
- 三種方法繪製雷達圖,用最快的時間做出最好看的視覺化圖表視覺化
- 如何在前端通過JavaScript建立修改CAD圖形前端JavaScript
- 如何使用分析模型 — 2. 魚骨圖,清晰表達因果關係模型
- 常考圖表、工具
- 使用DSL表達軟體設計意圖 - guitarvydasGUI
- 如何使用 XYZ 軟體建立複雜圖形
- PowerPoint 教程「21」,如何在 PowerPoint 中使用圖表和圖形?
- JavaScript WebGL 使用圖片JavaScriptWeb
- ftp工具,ftp工具怎麼使用,如何操作?使用教程圖解。FTP圖解
- 為雷達圖中不同系列的資料使用不同的顏色
- ECharts與資料視覺化:如何高效使用JavaScript實現複雜圖表Echarts視覺化JavaScript
- 如何建立 mapbox 精靈圖
- PatterNodes Mac(建立圖形向量模式工具)Mac模式
- 資料分析工具的雷達圖:監測的不僅僅是天氣,還有能力!
- Laravel Charts 圖表 使用Laravel
- Angular10.x 如何使用eCharts圖表庫AngularEcharts
- D3.js 教程: 使用 JavaScript 建立可互動的柱狀圖JSJavaScript
- 使用Leaflet建立地圖模組地圖
- EasyGantt for mac(甘特圖建立工具原名mcPlanner)Mac
- 建立第一個G2圖表