图表选型

Line Chart

备选：Area Chart, Smooth Area

有时间轴就看趋势；点太少改用统计卡，线超过 6 条就换面积图或做降采样。

用：Data has a time axis; user needs to observe rise/fall trends or rate of change over a continuous period

不用：Fewer than 4 data points (use stat card); more than 6 series (visual noise); no time dimension exists

量级：<1000 pts: SVG; ≥1000 pts: Canvas + downsampling; >10000: aggregate to intervals

Bar Chart (Horizontal or Vertical)

备选：Column Chart, Grouped Bar

比大小用柱状；类别超过 15 个横过来，20–50 个改用条形表格。

用：Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15

不用：Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked)

量级：<20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table

Pie Chart or Donut

备选：Stacked Bar, Waffle Chart

看占比用饼或环；切片超过 5 片、或需要精确比较，就换堆叠条。

用：≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values

不用：Categories > 5; slice differences < 5% (visually indistinguishable); user needs precise values; accessibility-first context

量级：Max 6 slices; beyond that switch to stacked bar 100%

Scatter Plot or Bubble Chart

备选：Heat Map, Matrix

看两个连续变量的关系用散点；点少于 20 个说明不了分布。

用：Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset

不用：Variables are categorical (use grouped bar); fewer than 20 points (patterns aren't meaningful); mobile-primary context

量级：<500 pts: SVG; 500–5000: Canvas at 0.6–0.8 opacity; >5000: hexbin or aggregate first

Heat Map or Choropleth

备选：Grid Heat Map, Bubble Heat

二维密度用热力；格子少于 20 个不如直接标数字。

用：Showing intensity/density across a 2D grid; time-based patterns (e.g., activity by hour × day)

不用：Fewer than 20 cells (use bar); user needs to read exact values; colorblind users without pattern fallback

量级：Up to 10,000 cells efficiently; beyond that aggregate; calendar heatmap: 365 cells max per SVG

Choropleth Map or Bubble Map

备选：Geographic Heat Map

有地理位置才用地图；区域面积悬殊会让读图失真。

用：Data has a regional/location dimension; spatial distribution is the core insight for the user

不用：Regions have very different sizes making visual comparison misleading (use bar); mobile-primary context

量级：<1000 regions: SVG; ≥1000: Canvas/WebGL (Deck.gl); global maps: tile-based rendering

Funnel Chart or Sankey

备选：Waterfall (for flows)

转化漏斗看逐级流失；阶段超过 6 级会失去可读性。

用：Sequential multi-stage process; showing conversion or drop-off rates between defined stages

不用：Stages aren't sequential; values don't decrease monotonically (use bar); fewer than 3 stages

量级：3–8 stages optimal; beyond 8 stages group minor steps into 'Other'

Gauge Chart or Bullet Chart

备选：Dial, Thermometer

实际值对目标值用子弹图；一个指标一条，不要叠在一起。

用：Single KPI measured against a defined target or threshold; dashboard summary context

不用：No target or benchmark exists; comparing multiple KPIs at once (use bullet chart grid)

量级：Single metric per gauge; for 3+ KPIs use bullet chart grid layout

Line with Confidence Band

备选：Ribbon Chart

预测线要带置信区间，别画一根光秃秃的延长线。

用：Historical data + model predictions; communicating uncertainty range to non-technical stakeholders

不用：No historical baseline; prediction confidence is too low to be useful; audience is not data-literate

量级：Keep historical window to 30–90 days for readability; forecast horizon ≤ 30% of visible x-axis range

Line Chart with Highlights

备选：Scatter with Alert

异常点要高亮并给出基线，否则读者不知道「正常」长什么样。

用：Monitoring a time-series for outliers; alerting users to unexpected spikes or dips in operational data

不用：Anomalies are predefined categories (use bar with highlight); real-time context without a pause control

量级：Stream at ≤60fps with Canvas; batch: up to 10,000 pts; mark anomalies as a separate data layer

Treemap

备选：Sunburst, Nested Donut, Icicle

嵌套占比用矩形树图；层级超过 3 层就该拆开看。

用：Showing size relationships within a hierarchy; overview of proportional structure (e.g., budget breakdown)

不用：Hierarchy depth > 3 levels (too complex to read); user needs to compare sibling values precisely

量级：<200 nodes: SVG; 200–1000: Canvas; >1000: paginate or pre-filter before rendering

Sankey Diagram

备选：Alluvial, Chord Diagram

看流向与分流用桑基图；节点超过 12 个会变成一团线。

用：Showing how quantities flow between nodes; multi-source multi-target distribution

不用：Flow directions form loops (use network graph); fewer than 3 source-target pairs; mobile-primary context

量级：<50 flows: SVG; ≥50: Canvas; >200 flows: aggregate minor flows into 'Other' node

Waterfall Chart

备选：Stacked Bar, Cascade

累计增减用瀑布图，能看出每一步对总量的贡献。

用：Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance)

不用：Changes are not additive; more than 12 bars (readability breaks); audience expects a simple total

量级：4–12 bars optimal; beyond 12 aggregate minor items into a single 'Other' bar

Radar / Spider Chart

备选：Parallel Coordinates, Grouped Bar

多维比较用雷达图；超过 8 个维度就失去区分度。

用：Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)

不用：Axes > 8 (unreadable); values need precise comparison (use grouped bar); audience unfamiliar with radar charts

量级：2–3 datasets maximum per chart; 5–8 axes; beyond 8 axes switch to parallel coordinates

Candlestick Chart

备选：OHLC Bar, Heikin-Ashi

开高低收用 K 线；必须配成交量，否则看不出力度。

用：Financial time-series with Open/High/Low/Close data; trading or investment product context only

不用：Non-financial audience; no OHLC data available (use line chart); accessibility-first context

量级：Real-time: Canvas required. Historical: paginate by time range. Max 500 candles visible at once

Network Graph

备选：Hierarchical Tree, Adjacency Matrix

关系网络用节点图；超过 50 个节点要做聚类或筛选。

用：Mapping connections between entities; network topology or social graph exploration context

不用：Node count > 500 without clustering pre-applied; user needs precise connection counts; mobile context

量级：≤100 nodes: SVG; 101–500: Canvas; >500: must apply clustering/LOD before rendering

Box Plot

备选：Violin Plot, Beeswarm

看分布形态用箱线图；样本少于 20 个不足以画箱。

用：Showing spread, median, and outliers of a dataset; comparing distributions across multiple groups

不用：Fewer than 20 data points per group (distribution is not meaningful); audience unfamiliar with statistical charts

量级：Any sample size; aggregated representation so rendering is ⚡ Excellent at any volume

Bullet Chart

备选：Gauge, Progress Bar

空间紧张时用紧凑版子弹图，一行一个指标。

用：Dashboard with multiple KPIs side by side; space-constrained contexts where a gauge is too large

不用：Single KPI with emphasis (use gauge); data has no defined target range; fewer than 3 KPIs

量级：Ideal for 3–10 bullet charts in a grid; scales to any count efficiently

Waffle Chart

备选：Pictogram, Stacked Bar 100%

百分比用华夫图，比饼图更容易比较大小。

用：Showing what fraction of a whole is filled; percentage progress in a visually engaging and accessible format

不用：More than 5 categories (use stacked bar); exact values matter over visual proportion; very tight space

量级：10×10 grid standard (100 cells); for > 5 categories switch to stacked 100% bar

Sunburst Chart

备选：Treemap, Icicle, Circle Packing

层级占比用旭日图；超过 3 环就看不清了。

用：Exploring nested proportions where both hierarchy and relative size matter (e.g., org spend breakdown)

不用：More than 3 hierarchy levels (outer rings become unreadable); precision matters over overview; mobile

量级：<100 nodes: SVG; 100–500: Canvas; >500: filter to top N before rendering

Decomposition Tree

备选：Decision Tree, Flow Chart

归因拆解用分解树，逐层下钻到可行动的粒度。

用：Decomposing a metric into contributing factors; AI-assisted analysis or BI drill-down scenarios

不用：No clear parent-child causal relationship; audience expects a summary rather than exploration

量级：Up to 5 levels deep; limit visible nodes to 20 per level for readability; lazy-load deeper levels

3D Scatter / Surface Plot

备选：Volumetric Rendering, Point Cloud

三维数据才用 3D；平面屏幕上容易误读深度。

用：Scientific/engineering context where Z-axis carries essential info not expressible in 2D

不用：2D projection conveys the same insight; mobile context; accessibility-required environments; standard business dashboards

量级：WebGL required. Deck.gl: up to 1M points. Three.js: LOD required beyond 50,000 pts

Streaming Area Chart

备选：Ticker Tape, Moving Gauge

实时流用流式面积图，只保留最近窗口，旧数据聚合。

用：Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance

不用：Update frequency < 1/min (use periodic-refresh line chart); flashing content without reduced-motion support

量级：Canvas/WebGL required. Buffer last 60–300s of data. Downsample older data on scroll

Word Cloud with Sentiment

备选：Sentiment Arc, Radar Chart

情绪分布用带情感着色的词云；只做概览，不做精确比较。

用：NLP output visualization; exploratory analysis of text corpus sentiment; frequency-weighted keyword overview

不用：Precise values matter (word size is inherently imprecise); screen-reader context; corpus < 50 items

量级：50–5000 terms optimal. Beyond 5000: apply top-N filtering before render. Avoid on mobile

Process Map / Graph

备选：Directed Acyclic Graph (DAG), Petri Net

流程挖掘用过程图，标出瓶颈与回流的边。

用：Analyzing event logs to visualize actual process flows; identifying bottlenecks and deviations in ops/product funnels

不用：No event log data available; audience expects a static flowchart (use diagram tool); node count > 100 without pre-filtering

量级：<30 nodes: SVG; 30–100: Canvas; >100: apply variant filtering (top 80% of cases) before rendering