鐵人檔案
這是一套以 30 天為節奏、循序漸進的 Chart.js (v4.5.1) 系列學習，從環境建置與核心觀念開始，從掌握 `type`、`data`、`options` 三大設定，以及折線圖、長條圖、圓餅圖、雷達圖與混合圖表等常用類型。此系列將進一步介紹 Tooltip、Legend、事件處理、RWD 與動態資料更新，並實作 JSON、CSV、RESTful API 串接、非同步載入、資料轉換及錯誤處理。後段延伸至自訂 Plugin、主題樣式、效能優化，以及 React、Vue、Angular 整合，最後完成互動式資料儀表板專案，適合前端初學者與希望強化資料視覺化實戰能力的開發者。
本篇是「手把手學會 Chart.js」的第一天，目標是讓完全沒接觸過 Chart.js 的初學者，理解它是什麼、能做什麼、如何安裝，並且動手畫出人生中第一張圖...
昨天（Day 1）我們認識了 Chart.js 是什麼、如何安裝，也動手畫出了人生中第一張長條圖。今天要更深入地拆解 Chart.js 的「骨架」：new C...
前兩天我們認識了 Chart.js 的整體架構、config 三大區塊（type、data、options），也畫出了第一張折線圖。今天要專注在另一個超常用的...
前三天我們認識了 Chart.js 的整體架構，也練習了折線圖與長條圖這兩種「以座標軸為基礎」的圖表。今天要介紹另一種完全不需要座標軸、專門用來呈現「佔比關係...
Day 2 我們畫出了第一張折線圖，Day 4 則學會了圓餅圖／環狀圖這類「無座標軸」的圖表。今天要回到折線圖本身，把它的進階功能一次補齊：如何在同一張圖上比...
前幾天我們陸續學會了折線圖、長條圖、圓餅圖／環狀圖，但都還沒有正面認識 Chart.js 最核心的基礎建設——座標軸（Scales）。座標軸負責把「資料」轉換...
一週過去了，我們從「認識 Chart.js」開始，陸續學會了折線圖、長條圖、圓餅圖／環狀圖、折線圖進階技巧，以及座標軸（Scales）的完整觀念。今天不學新的...
從今天開始，我們進入第二週：「常用圖表類型深入」。前一週學到的折線圖、長條圖、圓餅圖／環狀圖，都是拿「單一數值」去比較「不同類別」或「不同時間點」。但如果我們...
昨天（Day 8）我們學會了雷達圖（Radar Chart），用「輻射狀座標系」來比較「同一個對象在多個構面上的表現」。今天要介紹的極座標圖（Polar Ar...
昨天（Day 9）我們認識了極座標圖，它跟雷達圖一樣屬於「輻射狀座標系」的圖表家族。今天要切回大家最熟悉的「直角座標系」（跟長條圖、折線圖一樣有 x 軸、y...
