可視化度量
1）成像目標
快速理解：在3-5秒內識別趨勢/異常/移位。
對比正確：時期，細分，變體A/B。
相信數據：顯示不確定性，來源，新鮮。
行動：圖表旁邊是CTA、過濾器、花花公子鏈接。
2）指標類型和最佳形式
3）比例尺、軸和聚合
量表： 默認線性；對數-範圍倍數；百分比-［0；100].
零基礎：列從頭開始；線-不要求零（但顯示基線）。
聚合：白天/小時/分鐘，p50/p95/p99；避免「嘈雜」分布的平均值。
Roll-up/Drill-down：按層次結構（↑/↓）的D/H/H（每天/每周/每小時）和region→strana→gorod按鈕。
點采樣（downsampling）：LTTB/MinMax用於長行，以免失去極限。
4）上下文和比較
時期比較：「當前vs以前」（帶有虛線的overlay）和/或小型多重性；簽署相對∆和絕對∆。
季節性：「周末/假日」背景帶，每小時溫暖/冷區。
基準：水平規範/目標線（SLO/SLA），簽名單位和時間線。
信任間隔：帶/磁帶± CI；A/B-error bars和p-value/升降機。
5）不確定性，跳過，審計
跳過：斷線（不要連接零）；未完成窗口的灰色「霧」。
數據瀉湖：徽章「數據落後12分鐘」，tooltip with timestamp ingest。
修訂版：細條紋區域「重新計算」，指的是changelog。
6）顏色，形狀和可用性（A11y）
調色板：中性基礎；紅色是關鍵的，橙色是警告，綠色是正面的。
顏色獨立：復制值/標記/簽名；≥ WCAG AA的對比。
行數：≤5一個圖表；否則-小多面/立面。
尺寸/點擊量：互動目標≥ 32-40 px；焦環，鍵盤導航。
7）正確簽署
軸：單位，數字格式（1 234.56；12.3k;5.2%);帶有位置的數據標簽。
傳說：按視覺重要性排列；可點擊以啟用/排除行。
註釋：簡短和實例（"釋放PSP_X"，"事件#4217"），參考事件。
8）互動性： 不要超載
Hover/Tooltip：緊湊型，具有關鍵字段和∆ vs基線。
Zoom/Brush：通過鼠標/鍵盤突出顯示範圍；重置按鈕。
Drill-down：逐段點擊→詳細切口；breadcrumb返回。
選擇器：範圍預設（24 小時/7d/30 d）、段過濾器、Abs/百分比開關。
9）組件模板（示例API）
json
{
"type": "timeseries",
"title": "Payment authorizations,"
"metrics": [
{"id":"auth_rate_p50","label":"p50","agg":"p50"},
{"id":"auth_rate_p95","label":"p95","agg":"p95","style":{"dash":true}}
],
"x": {"field":"ts","granularity":"5m"},
"y": {"unit":"%","min":0,"max":100},
"baseline": {"value": 92. 0, "label": "SLO 92%"},
"ci": {"field_low":"ci_low","field_high":"ci_high"},
"badges": ["late_data","revised"]
}10）渲染性能
在服務器上聚合：返回已經是「正確的」窗口/分量。
Canvas/WebGL：用於數萬個點和熱圖；SVG-用於≤2 -3千個元素和清晰的簽名。
清單/表虛擬化：在滾動時裝載頁面。
緩存：熱針，precompute「昨天/周」。
11）有效性和反模式
不能：- 操縱標度（修剪高於零的列軸）。
- 混合不同的單位,沒有輔助軸和顯式簽名。
- 以8-10排建造堆疊區域的「森林」。
- 用零代替跳過。
- 使用3D/影子為「美麗」。
12）公式、單位和格式
金錢：小單位/十進制行；明確指定貨幣。
轉換/分數： 以十進制為單位的百分比（必要時為p。p.).
速度/投註：「每小時/每天」-簽名。
四舍五入：在不隱藏數量順序的情況下達到有意義的放電。
13）具體質量指標和SLO
顯示錯誤預算燒傷（預算剩余百分比）和警告級別。
對於aptime-stacked狀態酒吧「OK/Degraded/Down」+事件窗口。
對於latency-分布（p50/p95/p99），「violin/boxplot」跨集群/末端。
14） Storitelling和auto-sammari
Narrative Block： 2-4句子「發生了什麼」+「為什麼」+「做什麼」。
幻燈片/導出：PDF/PNG/SVG,保留字體和顏色；水印和切割日期。
15）可視化測試計劃
單位：軸格式，輪廓計算，CI磁帶。
整合：過濾器/範圍/位置，drill-down和反向導航。
E2E：從行動到行動腳本：點擊異常→花花公子。
A11y/i18n：屏幕讀者、鍵盤、簽名翻譯。
Perf：大排渲染，cold/warm cache，壓力10 ×點。
16）可視化質量度量
時間到洞察力（TTI）：第一次點擊/理解之前的時間中位數。
解釋率：具有可用的Explain的圖形比例。
動作率：執行小部件操作的地方。
錯誤/噪音：錯誤簽名,用戶投訴。
Perf p95：在第一個內容之前和交互之前的時間。
17）圖形設計支票清單
- 任務下的正確圖形類型
- 清晰的軸、單位、數字和日期格式
- 上下文：baseline/SLO、比較期、註釋
- 顯示通行證/滯後/審計
- 顏色與對比（WCAG）,不超過5行
- 無過載交互性：hover, zoom, drill-down
- 性能：聚合,downsampling, Canvas/WebGL在需要時
- CTA旁邊：打開報告/花花公子/創建警報
- 導出/sharing與切片日期和過濾器參數
18）嵌入dashbords
Consistency-kit：單個令牌（字體，尺寸，調色板），單個tultips行為。
Widget模板：KPI，時間表，distribution，comparison，map，table。
「智能」線索插槽：徽章「異常」，駕駛員解釋，操作按鈕。
19）實施計劃（3次叠代）
叠代1-Fundamentals（2-3周）：- 圖形類型，統一音階/格式，基線/SLO，跳過/lag徽章，導出。
- 時期比較、CI磁帶、小型多重、異常/徽章、鍵盤導航。
- Downsampling/WebGL，Explain面板，auto-sammari，dashbords預設和CTA。
20）迷你常見問題
是否需要始終從頭開始Y軸？
對於柱子-是的。對於線條-不一定,但指定基線而不是「欺騙」尺度。
如何顯示p95/p99而不過載？
具有相同軸的percentiles或小型多重磁帶。
取代8個細分市場的「餡餅」是什麼?
100%堆叠的酒吧或桌子，裏面有酒吧（單位間）+排序。
底線
有效的可視化度量是正確的形狀選擇+誠實的上下文+方便的行動。保持統一的量表和格式標準,顯示不確定性和缺口,讓我們快速運球和CTA,確保性能和可用性。然後，圖形將不再是「圖片」，並成為決策工具。