Line Chart Types/Time Series/Mini Line Charts (Sparkline) in Matrix

迷你折線矩陣

在格子中呈現緊湊趨勢，方便比較大量 small multiples。KPI 儀表板、投資組合概覽與伺服器監控的理想選擇 — 免費線上折線圖產生器。

Advancedsparkline迷你折線圖small multiples矩陣

Example

Guide

概述

Sparkline 矩陣將許多迷你折線圖排列成網格，便於快速比較多個實體的趨勢。每條 sparkline 極簡——無座標軸、無圖例——專注於形狀與變化方向。當你需要同時觀察數十甚至數百個指標的「走勢方向」，而不是精確數值時，sparkline 矩陣是最有效率的視覺化方式。

何時使用

  • 對比產品、地區或指標的趨勢
  • Dashboard 中的 KPI 摘要
  • 追蹤含多檔股票的投資組合
  • 伺服器或感測器狀態面板
  • 在深入前先展示整體模式
  • 快速識別異常或偏離常態的序列
  • 定期報告中需要緊湊但全面的概覽

不適用

  • 需要精確數值的情境（使用資料表格或帶軸的完整圖表）
  • 少於六個實體（常規多序列折線圖更合適）
  • 需要查看詳細座標軸的受眾
  • 資料序列之間尺度差異過大又需要直覺比較

關鍵變體

  • 可選的末值標籤（顯示最新數值）
  • 依表現著色（綠/紅 — 成長/下降）
  • 標記最小/最大值
  • 統一 Y 軸 vs 獨立 Y 軸
  • 點擊或懸停時的互動放大
  • 搭配表格欄位（sparkline 作為表格中的一欄）
  • 帶狀背景（band）標示目標或正常範圍

使用情境

  • 金融：資產組合視圖（每個資產一條 sparkline）、外匯匯率矩陣
  • 網站分析：每頁造訪量、各管道轉換率、跳出率趨勢
  • 銷售：依產品線的營收、各區域銷售趨勢、客單價變化
  • DevOps：每實例 CPU/記憶體/磁碟使用率、API 回應時間
  • 行銷：各活動轉化率、廣告支出回報率、社群媒體互動
  • 體育：球員表現指標矩陣（得分、助攻、籃板）
  • 供應鏈：各倉庫庫存水位、配送時效、退貨率
  • 教育：各班級平均成績趨勢、各科出席率

在折線圖產生器中快速設定

  1. 準備 CSV，每列代表一個實體，欄位為各時間點的數值。
  2. 上傳或貼上資料至編輯器。
  3. 選擇「Sparkline Matrix」圖表類型。
  4. 調整 gridLayout 的欄數以適應你的實體數量。
  5. 啟用 showFinalValue 以顯示末值標籤；啟用 colorCodeByChange 以依成長/衰退著色。
  6. 匯出或分享你的矩陣圖。

資料（CSV）

entity,week1,week2,week3,week4,week5,week6
Product A,120,125,130,128,135,140
Product B,200,198,210,215,220,225
Product C,80,85,78,82,88,90
Product D,150,145,140,138,142,148
Product E,300,310,305,320,315,330
Product F,90,88,92,95,93,98

圖表設定（JSON）

效能提示

  • SVG 渲染更銳利，Canvas 更快；視實體數量選擇
  • 每條 sparkline 控制在 20–30 個點以維持可讀性
  • 超過 100 個格子時使用虛擬化或分頁載入
  • 當資料變化不大時可快取結果，減少重繪
  • 避免在 sparkline 上使用動畫 — 數量多時會造成效能問題

設計最佳實踐

  • 遵循 Edward Tufte 的建議：去除所有非數據墨水（no axis, no label），只保留折線
  • 統一每個 sparkline 的寬度和高度，否則形狀比較會失真
  • 明確的排序邏輯（按名稱、按表現、按最近變化幅度）
  • 足夠的間距讓每條 sparkline 有「呼吸空間」
  • 配合一個摘要統計（如末值、變化百分比）提供錨定

常見問題

最多能放多少條 sparkline？ 20–50 條效果不錯。超過 100 條時，建議提供分頁、篩選或搜尋功能，讓使用者能快速定位感興趣的實體。超過 200 條在桌面裝置上仍可行，但務必加入虛擬化以維持效能。

是否應該統一所有 sparkline 的 Y 軸？ 取決於你的分析目的。統一刻度便於比較絕對大小（「Product E 的銷量明顯高於 Product C」），獨立刻度凸顯各自的趨勢形狀（「Product C 正在回升」）。最佳做法是提供切換選項，讓使用者自行選擇。

sparkline 矩陣可以加互動嗎？ 可以。常見互動包括：懸停 tooltip 顯示精確數值、點擊展開為完整圖表、拖曳選取時間範圍進行 drill-down。這些互動能彌補 sparkline 省略軸標的不足。

要多簡約才合適？ 依照 Tufte 的建議起點：不畫座標軸、不放標籤，只保留折線。然後根據受眾逐步加回元素 — 末值標籤幾乎總是值得加的，min/max 標記只在分析異常時需要。

如何處理缺失資料？ 顯示空段或斷線；未經明確說明前不要插值。在 sparkline 這麼小的畫布上，偽造的連續性比留白更危險。如果某實體缺失過多資料點，考慮用灰色標示或排到底部。

如何突顯異常值？ 常用手法：用紅色或醒目色標示異常序列、加粗異常 sparkline 的線條、在資料點上加標記、或增加一個獨立的「警示」欄位。還可以按「異常程度」排序，將偏離最大的實體排在最前面。

sparkline 矩陣適合手機螢幕嗎？ 有限度地適合。將欄數減少到 1–2 欄，增大每條 sparkline 的高度，並確保末值標籤的字體夠大。超過 20 個實體時，在行動裝置上建議改用可捲動列表搭配單條 sparkline，而非網格矩陣。

表格內嵌 sparkline vs 獨立矩陣，何時選哪個？ 當 sparkline 是輔助資訊（主資訊是文字或數字）時，嵌入表格中。當趨勢形狀本身就是分析重點時，使用獨立矩陣。兩者可以共存 — 表格提供數據，矩陣提供視覺模式。

Open in Line Graph Maker