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~