10分鐘學會Chart.js
The scientist has a lot of experience with ignorance and doubt and uncertainty, and this experience is of very great importance, I think. - 理察·費曼
chart.js
- Chart.js是一款彈性很高的圖表JavaScript library,
- 支援基本常見的統計圖表類型 - 折線圖(line) , 長條圖(bar) , 雷達圖(radar) , 圓餅圖(pie & doughnut) , 圓面積圖(polarArea) , 氣泡圖(bubble) , 分布圖(scatter) , 混合圖形
使用Chart.js
- 使用 Chart.js CDN
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> |
- 載入Chart.js之後,我們可以先將要顯示圖表的位置加入一個canvas
1 | <canvas id="myChart" width="400" height="400"></canvas> |
- Chart.js接受多種取得canvas的方式,也支援混合類型的圖表
1 | var ctx = document.getElementById('myChart'); |
一般屬性設定
- 畫布渲染大小(
canvas.width
和.height
)不能用相對值表示,與顯示大小(canvas.style.width
和.height
)相反
1 | `<canvas height="40vh" width="80vw">` <!-- **無效的**值,畫布不會調整大小--> |
- Chart.js使用其父容器來更新畫布渲染和顯示大小,此方法要求容器相對定位,並且只專用於圖表畫布。
1 | <div class="chart-container" style="position: relative; height:40vh; width:80vw"> |
基本範例
1 | <canvas id="myChart" width="400" height="400"></canvas> |