2024-07-04 Chart.js 套件

2024-07-04
JavaScript 系列四：第3課 ── Chart.js 套件
課程目標
認識並且能使用 Chart.js 套件

課程內容
這次的套件是 https://github.com/chartjs/Chart.js

文件與 demo 在 https://www.chartjs.org/

這是一個畫圖表、報表的工具，而且非常漂亮

如果不使用套件，自己手動做圖表的話，要用 canvas api 來畫，而且需要很多數學計算來繪圖，非常麻煩

這次就完全自己研究看看吧。先試著讓官方範例可以成功跑出來，然後再試著調整設定、參數、放進自己的資料畫圖看看

軟體工程師，經常需要翻閱大量的國外文件，所以需要基本的英語閱讀能力

不用精通沒關係，一邊翻文件，一邊查字典，拼湊線索看看

如果實在不行，就搜尋 套件名稱 教學 來找找看有沒有好心人寫過教學，例如 chart js 教學

長遠來說，還是要逐漸提升自己的英語閱讀能力才行

課後作業
請使用 https://jsfiddle.net

請在網頁上，畫出三種圖表

折線圖 Line Chart
長條圖 Bar Chart
圓餅圖 Pie Chart
政府近年在提倡透明化，公佈了許多資料

請前往 政府資料開放平台 https://data.gov.tw/

或是 台北市政府資料開放平台 https://data.taipei/

逛逛看，找幾份有趣的資料。

這三種圖表的使用時機不太一樣，適用的資料類型也不太一樣，你可以稍微研究一下，選擇你覺得適合的

（資料量巨大的話，請在圖表內呈現10筆資料即可。）

做出以上功能，你就完成這次的課程目標了！

JavaScript 系列四：第3課 ── Chart.js 套件:
https://codelove.tw/@howtomakeaturn/post/2anNka
CodeLove 愛寫扣論壇 站長阿川