用 CHART.JS 畫圖表 V2.0，十分鐘就上手

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 官網
• Chart.js 官網教學文件 (英文)
• Chart.js 官網圖表的範例
• Chart.js 下載

不囉唆，讓我們直接進入主題吧。

一，載入 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：柱狀圖的邊線寬

為了方便呈現，我們虛擬了一間公司的月報表

    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 呢？

假設十一月銷售業績如下：

設定方式如下：

    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~