用 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:

這裡我們採用 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~

1 thought on “用 CHART.JS 畫圖表 V2.0,十分鐘就上手

  1. 回覆

    […] 注意: 這篇文章所介紹的 Chart.js 版本為 V1.x,如果你使用最新的 V2.x 時,請參閱這篇:用 CHART.JS 畫圖表 V2.0,十分鐘就上手 […]

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Scroll to top