2015 年的時候寫了一篇關於 Chart.js 的小教學，由於將數據圖表化的功能在一般公司裡會很常用，通常會建議設計師學一套簡單的套件來應付日常圖表的製作需要。Chart.js 在使用的難易度及呈現的效果上，一直是我心目中的第一選擇，當時寫教學文的時候 Chart.js 還只是 V1.x，設定上也比較簡單，非常適合沒有 Coding 背景的設計師使用。今年收到一篇網友的回饋時才發現 Chart.js 目前已經發展到 V2.0 了，功能變得更強大，像是新版的 Chart.js 支援混合型的圖表，動畫設定也變得更豐富，還有一些現代網站常見的功能，像是 RWD 的支援等等...最重要的是新版使用方式也與 1.x 有所不同。因此這篇是針對 Chart.js V2.0 的小教學，對象主要還是視覺設計師，內容會盡量簡化，方便大家馬上拿來用，希望對大家有幫助。
不囉唆，讓我們直接進入主題吧。
一，載入 Chart.js：
這裡我們採用 CDN 的方式引入，請放在 head 的標籤內，內容如下：
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
二，繪製 Canvas 畫布：
請在 body 的標籤內，放置下面的內容，理論上只需要繪製 Canvas，並給這個 Canvas 一個 ID 即可。但由於 Chart.js 的圖表預設支援 RWD，為了方便頁面的調整，建議在 Canvas 畫布之外加一層 Div，這樣你就可以根據自己頁面的需要去調整圖表的大小。
<div style="width:400px;">
<canvas id="heyChart"></canvas>
</div>
三，設定 Chart.js 的參數：
完整的設定如下：
<script>
var ctx = document.getElementById("heyChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["王大毛", "孫小毛", "小甜甜", "許唇美", "豬哥亮"],
datasets: [{
label: '十月：銷售業績',
data: [4, 1, 3, 7, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
}]
}
}
});
</script>
由於上面的設定比較長，看起來很可怕，我們用顏色拆分幾個小項來解釋。
第一行最重要的是 heyChart，這個名稱必須和 Canvas 的 ID 一致。
var ctx = document.getElementById("heyChart");
接著是告訴 Chart.js 要用什麼樣式的圖表來呈現，由於 Chart.js 可以呈現的圖表類型很多，每種圖表的資料結構也不完全相同，無法一一解釋，你可以先參考官網上的範例，然後依自己的需要去選擇。這裡的範例選擇 bar，也就是柱狀圖。
type: 'bar',
接下來是帶入將圖表的內容，雖然看起來很複雜，但仔細一看，資料結構大致可分成六類，你只要依序帶入即可：
- labels：表示業務員的名字
- label：圖表名稱
- data：業務員的業績
- backgroundColor：柱狀圖的背景色
- borderColor：柱狀圖的邊線顏色
- borderWidth：柱狀圖的邊線寬
為了方便呈現，我們虛擬了一間公司的月報表
| 業務名字 | 業績 |
|---|---|
| 王大毛 | 4 |
| 孫小毛 | 1 |
| 小甜甜 | 3 |
| 許唇美 | 7 |
| 豬哥亮 | 2 |
data: {
labels: ["王大毛", "孫小毛", "小甜甜", "許唇美", "豬哥亮"],
datasets: [{
label: '十月：銷售業績',
data: [4, 1, 3, 7, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
如果一切順利的話，將檔案存起來後，你因該可以在瀏覽器上看到下面的圖表
如何將兩張業績表放在同一張圖表裡？
如果我們又新增了一筆十一月的銷售業績，想將十月和十一月的銷售業績放在一起比較，這時要怎麼調整 Chart.js 呢？
假設十一月銷售業績如下：
| 業務名字 | 業績 |
|---|---|
| 王大毛 | -2 |
| 孫小毛 | 12 |
| 小甜甜 | 6 |
| 許唇美 | -5 |
| 豬哥亮 | 8 |
設定方式如下：
data: {
labels: ["王大毛", "孫小毛", "小甜甜", "許唇美", "豬哥亮"],
datasets: [{
label: '十月：銷售業績',
data: [4, 1, 3, 7, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
},{
label: '十一月：銷售業績',
data: [-2, 12, 6, -5, 8],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
修改順利的話，你會看到如下的圖表：
最後，如果上述的範例你都成功的話，看看有沒有辦法將同一個例子改成其他的樣式。Good Lucky~