# JavaScript教學 – 產生圖表 在網頁中,經常會需要將數據做呈現,除了傳統的表格呈現方式以外,透過折線圖、直方圖、圓餅圖….等方式,將資料「視覺化」,是非常重要的環節。 今天,我們會分享,如何透過JavaScript,在你的網頁上呈現視覺化的圖表哦! # 使用Chart.js [chart.js官網](https://www.chartjs.org/) ![](https://i.imgur.com/ucOb26m.png) # 安裝 ``` <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> ``` 首先,在 html 上新增一個 canvas,之後我們的圖表會畫在這個容器裡面。 ``` <div> <canvas id="myChart"></canvas> </div> ``` 添加資料 ``` <script> const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', ]; const data = { labels: labels, datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }] }; const config = { type: 'line', data: data, }; </script> ``` ``` <script> const myChart = new Chart( document.getElementById('myChart'), config ); </script> ``` - labels 則是項目的標籤、資料則是以陣列形式放在 data.datasets.data 裡面。 - type代表產生的圖表類型,包含以下種類: ![](https://i.imgur.com/GlnG2PR.png) 在圖表加入顏色 畫到這邊可能會覺得圖表有點單調,不過我們可以在參數裡面加上 backgroundColor 和 borderColor,甚至是 borderWidth 線條寬度,就能畫出彩色的圖表: ![](https://i.imgur.com/OpfKkTd.png) # 結語 到這邊就能畫出基本圖表了,在 官方網站的範例中 可以看到各種不同的圖表。如果找不到資料可以用的話,建議可以搭配 [政府開放資料](https://data.gov.tw/) 來做練習