jQuery 筆記 - Chart.js 基本使用

Chart.js 簡介

Chart.js 是一款彈性很高的圖表 JavaScript library，支援八種常見的統計圖表類型，夠將圖表混合在一起使用，也支援動畫的效果，讓我們製作出來的圖表更加精美！Chart.js 可以與 ES6 模塊，純 JavaScript 和模塊加載器一起使用。

載入 chart.js

您可以從 GitHub 版本下載最新版本的 Chart.js 或使用 Chart.js CDN。

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

要把這一段加在 <head> 標籤中，不然會讀取不到資料，記得也要加入 js 的 <script> 標籤。

因會不定期更新，最新版本請見官網。

用法

把圖表放在 html 中的位置中，並且要用 <canvas> 標籤包住。如下方程式碼。

1	<canvas id="chart-area"></canvas>

可用 CSS 或是直接在 <canvas> 中加入寬度與高度的設定，但我個人習慣用 CSS 獨立管理，這裡便不贅述。

綁定 id

提供四種綁定方式，任擇一即可。

1	var ctx = document.getElementById('myChart');

1	var ctx = document.getElementById('myChart').getContext('2d');

1	var ctx = $('#myChart');

1	var ctx = 'myChart';

設定自己的圖表

放入了位置與綁定了元素，就可以開始定義或創建自己的圖表類型了！以下為官網範例的條形圖，該條形圖顯示了不同顏色的數值表，y 軸從 0 開始。

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'bar', //圖表類型
  data: {
    //標題
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# test', //標籤
      data: [12, 19, 3, 5, 2, 3], //資料
      //圖表背景色
      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)',
        'rgba(255, 159, 64, 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)',
        'rgba(255, 159, 64, 1)'
      ],
      //外框線寬度
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          responsive: true //符合響應式
        }
      }]
    }
  }
});

codepen https://codepen.io/hnzxewqw/pen/LYVMNPX

結合兩個圖表使用

Chart.js 也支援混合類型的圖表，能夠將多個 bar chart 跟多個 line chart 放在一起比較；最外層的圖表類型必須設定為 bar，接著在 dataset 的第一個物件後，加上第二個物件，即可插入第二個圖表，例如以下程式碼：

datasets: [{
     label: 'test01', //標籤
     data: [12, 19, 3, 5, 2, 3], //資料
     //圖表背景色
     backgroundColor: [
       'rgba(255, 99, 132, 0.5)',
       'rgba(54, 162, 235, 0.5)',
       'rgba(255, 206, 86, 0.5)',
       'rgba(75, 192, 192, 0.5)',
       'rgba(153, 102, 255, 0.5)',
       'rgba(255, 159, 64, 0.5)'
     ],
     //圖表外框線色
     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)',
       'rgba(255, 159, 64, 1)'
     ],
     //外框線寬度
     borderWidth: 1, //從這裡開始加第二筆物件資料
   }, {
     type: 'line',
     label: 'test02',
     data: [12, 19, 3, 5, 2, 3],
     borderColor: 'rgba(255, 99, 132, 1)',
     backgroundColor:'rgba(255, 255, 255, 1)'
   }]
 },

codepen https://codepen.io/hnzxewqw/pen/PoqXNYw

心得

datasets 呈現的是 JSON 格式資料，所以對於陣列與物件的用法也要熟悉，在插入資料時比較不會搞混。

參考資料

chart.js 官網

十分鐘學習 Chart.js - 圖表繪製

Chart.js - 輕鬆完成資料視覺化

提姆寫程式