Open Source - Chjs

網頁統計圖表Chart.js快速上手

Get ready for Chart.js
  • 時數:14小時
  • 費用:NT$ 12,000
  • 點數:3.0

選擇查詢分區開課時間

地點 班號 日期 時間 預約
台北 25494 班 2025/04/07 ~ 2025/04/08 每週一二 09:00~17:00 預約

目前查無開課時段

詳細開課時間請洽詢業務
新竹、台中、高雄如有上課需求,請參考台北開課日期,洽當地服務人員依需求加開遠距開課日期

聯絡恆逸

教材

恆逸專用教材

課程目標

在這個數值資料爆炸的時代,海量數值資料如果要用表格的方式來呈現,當然可以很詳細的呈現,但是如果要在有限的時間內讓使用者快速瞭解這些數值資料的概括意義,最直覺的方式就是將龐大的數值資料圖像化,尤其在想要在極短時間內留住著網頁訪客的情況下,將資料視覺圖像化更是極其重要。

然而在網頁中繪製圖表相對困難,不像是在Excel這類型的試算表中,選一選功能就能夠輕易的產生,因此很多的作法,就是將資料先匯入到Excel中之後,再轉換成圖型檔案,例如PNG或是JPEG後插入到網頁中,這樣當然可以一定程度的解決問題。但是如果資料一旦被修改的話,整個流程就要重新來過一次,很不方便。更不用說如果要直接從伺服器取得動態的資料,而即時以圖表的方式呈現在網頁上,這是完全做不到的。

為了滿足這種需求,因此就產生出了Chart.js,這是一個JavaScript 的圖表函式庫,提供了八種類型的常用統計圖表。雖然是一個輕量級的函式庫,但是卻有豐富多樣化的設定,因此具備非常好的彈性,甚至有內建吸睛的動畫效果,是一個可以快速將數值資料視覺化的理想工具。

適合對象

對網頁統計圖表有需求的所有人員

預備知識

已完成以下課程所具備技術能力

FEDev:前端必學的網頁開發基礎技能

FEID:前端互動式網頁程式設計-UI與元件設計

課程內容

。基礎HTML與CSS知識

。基礎JavaScript知識

  1. Chart.js介紹與環境設定
  2. 長條圖(Bar chart)的建立
  3. 圓餅圖(Pie chart)的建立
  4. 甜甜圈圖(Doughnut chart)的建立
  5. 折線圖(Line Chart)的建立
  6. 極座標圓餅圖(Polar area chart)的建立
  7. 雷達圖(Radar chart)的建立
  8. 散佈圖(Scatter chart)的建立
  9. 氣泡圖(Bubble chart)的建立

學會技能

  1. 學會設定Chart.js開發環境
  2. 知道如何利用Chart.js建立吸睛的圖表動畫
  3. 能夠快速利用Chart.js設定客製化色彩的圖表
  4. 明白如何利用Chart.js建立複合式網頁圖表
  5. 以動態資料透過Chart.js即時建立圖表