創建美麗的南丁格爾玫瑰圖用於資料視覺化。完美適用於以圓形格式顯示分類資料。
工具功能
- 為資料視覺化創建美麗的玫瑰圖。: 為資料視覺化創建美麗的玫瑰圖。
- 支援分類資料顯示。: 支援分類資料顯示。
- 可自訂顏色和外觀。: 可自訂顏色和外觀。
- 完美適用於統計資料展示。: 完美適用於統計資料展示。
使用方法
- 第一步: 點擊'載入範例'查看演示,或按格式輸入資料:標籤,數值,顏色
- 第二步: 自訂圖表標題和顯示選項。
- 第三步: 點擊'生成圖表'按鈕建立並查看圖表,需要時可下載。
生成原理
南丁格爾玫瑰圖歷史和極座標
南丁格爾玫瑰圖(也稱為極區圖或雞冠花圖)由弗洛倫斯·南丁格爾於1858年開創,用於視覺化克里米亞戰爭期間的死亡率資料。該圖表使用極座標,其中資料類別表示為從中心點輻射的楔形,半徑與資料值成正比。與角度變化的圓餅圖不同,玫瑰圖具有相等的角度但半徑不同,使值比較更直觀。該工具實現極座標(r,θ)到笛卡爾座標(x,y)的轉換,使用x = r × cos(θ),y = r × sin(θ)、扇形區域計算和徑向縮放。進階功能包括用於資料系列比較的多個同心環、用於視覺深度的漸變填充以及用於資料值的註釋標籤。該視覺化擅長以美觀的圓形格式顯示週期性模式、季節性資料和週期性趨勢。
資料映射和扇形生成演算法
圖表生成演算法將圓分為等角度扇形(θ = 360° / n個類別)並將資料值映射到徑向距離。資料處理包括:值歸一化(縮放到最大半徑)、扇形的面積計算(A = ½ r² θ以弧度為單位)以及從調色板或漸變的顏色分配。扇形渲染使用SVG路徑命令或Canvas弧操作,從中心原點繪製,具有計算的角度和半徑。進階功能包括:用於更好值分佈的對數或平方根縮放、用於環形圖樣式的內半徑配置、用於扇形分隔的描邊邊框以及資料更新之間的平滑過渡。演算法處理邊緣情況:零值(用於可見性的最小半徑)、異常值(上限或單獨縮放)以及用於自動定位的標籤碰撞檢測。互動功能包括懸停效果、用於資料深入的點擊事件以及用於引人入勝簡報的動畫序列。
視覺設計和與其他圖表的比較
南丁格爾玫瑰圖為特定資料類型提供獨特優勢:週期性資料(12個月年度模式、24小時每日週期、每週模式)、分類比較(同等重要的多個類別)以及視覺衝擊力(比長條圖更具簡報吸引力)。該工具提供自訂:配色方案(順序、發散、分類調色板)、標籤定位(扇形內部、帶連接器的外部、徑向方向)以及大小配置(半徑、內孔)。與替代方案的比較:圓餅圖(角度vs半徑用於值編碼)、雷達圖(多個變數vs跨類別的單個變數)以及長條圖(線性vs圓形版面配置)。匯出選項包括:用於資訊圖表和印刷媒體的SVG、用於報告和儀表板的PNG/JPEG以及帶工具提示的互動式HTML。最佳實踐包括限制類別(6-12個最適合可讀性)、使用一致的配色方案以及在商業智慧和資料敘事應用中提供清晰的圖例以進行資料解釋。
常見問題
- 什麼是南丁格爾玫瑰圖,何時應該使用它?
- 南丁格爾玫瑰圖(極座標面積圖)以圓形格式顯示分類資料,其中每個類別是一個具有相等角度但半徑與資料值成比例的扇形。用於:週期性資料(月度模式、日週期)、分類比較,以及您想要突出顯示主導類別的視覺演示。對於演示來說,它比長條圖更具視覺吸引力。
- 該工具接受什麼資料格式?
- 以格式輸入資料:標籤,值,顏色(每行一個條目)。顏色是可選的 - 如果省略,則使用預設顏色。範例:"Product A,350,#FF6B6B Product B,280,#4ECDC4"。標籤可以是文字,值應該是數字,顏色可以是十六進位代碼(#FF6B6B)或顏色名稱。
- 扇區如何確定大小和顏色?
- 每個扇區具有相等的角度(360°除以類別數),但半徑根據資料值而變化。半徑與值成比例 - 較大的值建立更長的徑向段。顏色可以按類別指定或使用預設調色板。該工具自動縮放值以適合圖表,同時保持比例關係。
- 我可以自訂圖表的外觀嗎?
- 可以,您可以自訂:圖表標題、顯示/隱藏標籤(類別名稱)、顯示/隱藏百分比,以及各個類別顏色。該工具提供調整視覺演示的選項,同時保持極座標面積圖的核心結構。
- 與圓餅圖或長條圖相比有什麼優勢?
- 南丁格爾圖表提供:等角扇區使比較更容易、徑向長度清楚地表示大小、更好的視覺衝擊力用於演示、非常適合週期性/定期資料,以及有效突出主導類別。與角度變化的圓餅圖不同,玫瑰圖保持一致的角度,使值比較更加直觀。
相關文件
- MDN - Canvas API - HTML5 Canvas API 用於圖形和視覺化
- MDN - SVG 文件 - 可縮放向量圖形文件和教學
- W3C - SVG 規範 - W3C 官方 SVG 規範
- MDN - CSS Color - CSS顏色值和顏色空間
- Web.開發 - 圖形和視覺效果 - Web圖形和動畫最佳實踐