圖表樣式庫｜地緣縱橫

圖表樣式庫Chart Library · 14 種 SVG 圖表

本圖表庫收錄 14 種圖表類型，皆以純 SVG 渲染、無外部依賴，供《地緣縱橫》雜誌內頁、數據說明、簡報製作使用。每種圖表標示適用情境與 JSON 資料格式規格。

01直條圖Vertical Barbar

適用：比較不同項目的數值大小，例如各國市占率、年度排名

{"type":"bar","vals":[n,...],"labels":["..."],"accent":idx}

02橫條圖Horizontal Barbar-h

適用：標籤文字較長時的排名比較，例如機構全名、完整國名

{"type":"bar-h","vals":[n,...],"labels":["..."],"colors":["#hex"]}

03分組直條圖Grouped Barbar-group

適用：同時比較多個類別在不同維度的表現，例如多國多年數據對比

{"type":"bar-group","series":[{"label":"","vals":[n,...]}],"labels":[]}

04堆疊直條圖Stacked Barbar-stack

適用：展示各組成部分對整體的貢獻，例如出口結構隨時間演變

{"type":"bar-stack","series":[{"label":"","vals":[n,...]}],"labels":[]}

05折線圖Line Chartline

適用：追蹤單一指標的時間趨勢，例如 GDP 成長率、通膨率

{"type":"line","vals":[n,...],"labels":["..."],"zero":true}

06面積圖Area Chartarea

適用：強調趨勢的量感，適合展示累積總量的時間演變

{"type":"area","vals":[n,...],"labels":["..."]}

07多折線圖Multi-line Chartmulti-line

適用：比較多條趨勢線的相對走勢，例如台美中三邊指標並列

{"type":"multi-line","series":[{"label":"","vals":[n,...]}],"labels":[]}

08環圈圖Donut Chartdonut

適用：展示單一比例，例如市占率、民調支持度、認同感百分比

{"type":"donut","pct":67,"label":"說明文字"}

09方格圖Waffle Chartwaffle

適用：直覺呈現百分比，每格代表固定單位，比圓餅圖更易讀

{"type":"waffle","fill":23,"total":100,"label":"說明"}

10雷達圖Radar Chartradar

適用：多維度能力評估，例如國家綜合競爭力的六大維度指數

{"type":"radar","vals":[n,...],"labels":["..."],"max":100}

11熱力圖Heat Mapheatmap

適用：矩陣強度比較，例如多國雙邊貿易依存度或風險矩陣

{"type":"heatmap","rows":[],"cols":[],"vals":[[n,...]],"lo":0,"hi":100}

12坡度圖Slope Chartslope

適用：展示兩時間點之間的排名或數值變化，強調前後對比幅度

{"type":"slope","series":[{"label":"","start":0,"end":0}],"from":"","to":""}

13棒棒糖圖Lollipop Chartlollipop

適用：同直條圖但更清晰呈現個別數值，適合有大值差的比較

{"type":"lollipop","vals":[n,...],"labels":["..."]}

14氣泡圖Bubble Chartbubble

適用：三維數據比較：X 軸、Y 軸及氣泡大小，例如國家風險評估矩陣

{"type":"bubble","items":[{"label":"","x":0,"y":0,"r":0}],"xlabel":"","ylabel":""}