Chart-Maker — 在瀏覽器中建立圖表和圖示的 Web 應用程式

線上 / 離線產生器,29 種圖表類型,支援匯出為 PNG JPEG WEBP AVIF SVG,內建日誌,詳細指南,應用程式安裝

面向用戶 應用
Chart-Maker 應用程式
面向開發者 庫
Chart-Maker 函式庫
圖表設定
進階
JSON
預覽
使用方法 — 詳細說明

「圖表設定」面板包含所有控制項,旁邊的即時預覽會在每次變更時自動更新。在寬螢幕上兩者並排顯示,在手機上則上下堆疊,預覽位於設定下方。

流程:1)選擇圖表類型;2)輸入標題與資料集名稱;3)在下方表格中填寫資料;4)需要時復原或重做;5)開啟「匯出」以下載圖片或儲存專案。

共有 29 種類型,依資料輸入方式分組:

  • 標籤 / 值:長條圖、折線圖、面積圖、橫條圖、圓餅圖、環圈圖、雷達圖、極座標圖、文字雲。
  • X / Y 點:散佈圖(X, Y)、泡泡圖(X, Y, 大小)。
  • 多個資料集:堆疊、分組、多折線、組合(每個資料集為長條或折線)。
  • 類別與值清單:盒鬚圖、小提琴圖。
  • 階層:樹狀圖(標籤、值、群組)。
  • 格點:熱圖(X, Y, 值)。
  • 流量:桑基圖(從、到、流量)。
  • 地圖:分級著色(從清單中選擇國家,值)。
  • 帶誤差線的長條圖
  • K線 / OHLC
  • 漏斗
  • 文氏圖
  • 圖(網路)
  • 儀表板
  • 函數 (y = f(x))

資料表會依所選類型自動調整。「新增列」新增一筆,叉號刪除一筆。

  • 標籤 / 值:一個標籤和一個數字。
  • 點:X 和 Y(泡泡還有大小)。
  • 多個資料集:類別以逗號分隔,每個資料集的值為以逗號分隔的數字清單;組合中每個資料集設為長條或折線。
  • 盒鬚 / 小提琴:在值欄位中填入以逗號分隔的數字清單。
  • 熱圖:X、Y(類別)和一個值。
  • 桑基圖:從、到以及流量大小。
  • 分級著色:從下拉清單中選擇國家(名稱使用介面語言),並填入一個值。
  • 帶誤差線的長條圖: 標籤, 值, 誤差.
  • K線 / OHLC: 日期, O/H/L/C.
  • 漏斗: 標籤, 值.
  • 文氏圖: 集合(逗號分隔), 值.
  • 圖(網路): 節點(逗號分隔), 從/到.
  • 儀表板: 值, 最大值.
  • 函數 類型繪製 y = f(x)。輸入運算式(如 sin(x)、x^2、sqrt(x))、X 範圍(最小與最大)以及點數。函數 計算運算式並繪製曲線;公式也會顯示在圖表下方的資料清單中。

「匯出」按鈕會開啟一個視窗。

  • 格式:PNG、JPEG、WEBP、AVIF(真實格式,在瀏覽器中編碼 — 編碼器於首次使用時載入)與 SVG(向量)。
  • 寬度與高度 — 圖片尺寸(像素);留空表示目前圖表尺寸。
  • 下載圖片 — 儲存圖片;會加入背景以及圖表下方的資料清單。
  • 儲存專案 — 包含所有設定的 .json 檔;勾選「包含歷史與日誌」會將其加入檔案。
  • 組合/多資料集中,每個資料集可用左或右 Y 軸。

「匯入」按鈕會開啟一個視窗,其中有一個區域,可將 .json 專案檔拖入或點擊選擇。選擇檔案後,「套用專案」按鈕變為可用,並載入設定(若已儲存,也會載入歷史與日誌)。

  • Ctrl/Cmd + Z — 復原
  • Ctrl/Cmd + Y 或 Ctrl/Cmd + Shift + Z — 重做
  • Ctrl/Cmd + S — 儲存專案
  • Ctrl/Cmd + E — 匯出視窗
  • Ctrl/Cmd + O — 匯入視窗
  • Ctrl/Cmd + J — 日誌
  • Ctrl/Cmd + , — 設定

在輸入欄位內,Ctrl+Z 和 Ctrl+Y 作為一般文字編輯使用。

  • 復原 / 重做:在資料與設定的變更之間前後移動。
  • 日誌:保存動作、提示與錯誤;可以清除。

資料表上方的「進階」區彙整可選設定:副標題;曲線平滑、階梯線、虛線與填滿;堆疊與對數 Y 軸;抽稀;圖例位置;點大小與線寬;動畫時長與緩動;以及依需載入的效果——資料標籤、縮放/平移、註解、趨勢線與十字準線。在組合與多資料集圖表中,每個資料集可使用左或右 Y 軸。每個選項僅在適用的類型中顯示。