要在網頁產生長條圖、折線圖等圖表，可以在網頁引用 Chartist 這個專門用來產生圖表的 JavaScript library，透過引用，程式設計師只需撰寫產出符合 Chartist 規範的數據格式程式碼，剩下的就可交給 Chartist 前端圖表產生器自動產生，其支援下列圖表類型：
- Bar Chart (stacked and horizontal including)
- Line Chart
- Pie Chart
- Area Chart
- Donut Chart
- Gauge Chart
- Line scatter Diagram
- Animated SVG Path
- Bi-Polar Line Chart
- Timeseries
而產出的圖表，具有以下特色：
- Extreme responsive configuration.
- Label placement
- Multi-line labels
- Overlapping bars for mobile
- Holes in data
- CSS Animation
- SVG Animation
- Advanced SMIL Animations
- Plugins support
Chartist.js 網站資訊
網站網址：按我前往 Chartist.js
1.最簡單的方式就是直接在 HTML <head> 處引用 Chartist.js 及 Chartist.css。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
2.完成引用後，定義一個 div 來顯示圖表，可自訂寬度。
<div class="ct-chart ct-golden-section" id="chart1"></div>
3.接下來就是數據。
<script>
new Chartist.Line('#chart1', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]]
});
</script>
4.整個 HTML 看起來如下圖。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
</head>
<body>
<div class="ct-chart ct-golden-section" id="chart1"></div>
<script>
new Chartist.Line('#chart1', {
labels: [1, 2, 3, 4, 5, 6],
series: [[100, 120, 180, 200, 150, 300]]
});
</script>
</body>
</html>
5.執行後所呈現的圖形。
※※※
前往官方看更多範例