iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
1
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 23

【Day 23】網頁設計師 / 開發人員愛用的 JavaScript 圖表分享 - Chart.js

Chart.js

https://ithelp.ithome.com.tw/upload/images/20201008/201078103I3AKlahar.png

Chart.js 是一套專門設計給 網頁設計師開發人員 的 JavaScript 圖表,彈性度非常高、靈活好上手,支援 8 種常見的統計圖表類型,且具備動畫效果,讓原本平面的圖表變得更加生動!

安裝

Chart.js 官方有提供幾種安裝方式,可以從 GitHub releases 下載最新版本,或是使用 Chart.js CDN

CDN

<!-- Chart.js v2.9.3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

npm

npm install chart.js --save

Bower

bower install chart.js --save

開始使用 Chart.js

官方有提供一份詳細的使用說明手冊,能修改的地方和參數非常多,多花時間研究可以更靈活運用!以下簡單介紹使用方法。

將 Chart.js 載入之後,首先需要創立一個 canvas,這個 canvas 就是圖表要顯示的位置(寬度 width 和高度 height 可自由設定,或是不指定):

<canvas id="myChart" width="400" height="200"></canvas>

接著我們需要使用 jQuery2d context 的方式取得這個 canvas,以下幾種方式都可以使用:

// Any of the following formats may be used
var ctx = document.getElementById('myChart');
var ctx = document.getElementById('myChart').getContext('2d');
var ctx = $('#myChart');
var ctx = 'myChart';

再來就可以創建自己的圖表類型了!
以下為基本的長條圖(bar) 範例,每一條 bar 的顏色都可以個別指定

長條圖 ➜ Codepen 連結

<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart");
var chart = new Chart(ctx, {
  type: "bar", // 圖表類型
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], //顯示區間名稱
    datasets: [
      {
        label: "標籤名稱", // tootip 出現的名稱
        data: [12, 19, 3, 5, 6, 3], // 資料
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)", // 第一個 bar 顏色
          "rgba(54, 162, 235, 0.2)", // 第二個 bar 顏色
          "rgba(255, 206, 86, 0.2)", // 第三個 bar 顏色
          "rgba(75, 192, 192, 0.2)", // 第四個 bar 顏色
          "rgba(153, 102, 255, 0.2)", // 第五個 bar 顏色
          "rgba(255, 159, 64, 0.2)" // 第六個 bar 顏色
        ],
        borderColor: [
          "rgba(255,99,132,1)", // 第一個 bar 外框線顏色
          "rgba(54, 162, 235, 1)", // 第二個 bar 外框線顏色
          "rgba(255, 206, 86, 1)", // 第三個 bar 外框線顏色
          "rgba(75, 192, 192, 1)", // 第四個 bar 外框線顏色
          "rgba(153, 102, 255, 1)", // 第五個 bar 外框線顏色
          "rgba(255, 159, 64, 1)" // 第六個 bar 外框線顏色
        ],
        borderWidth: 1 // 外框線寬度
      }
    ]
  }
});
</script>

https://ithelp.ithome.com.tw/upload/images/20201008/201078107CAnGcK6uK.png

兩種圖表混合使用 ➜ Codepen 連結

如果今天需要顯示兩種資訊的圖表怎麼辦呢?別擔心!Chart.js 做得到!
Chart.js 支援混合圖表類型,能夠將多個圖表混合使用,以下舉 bar & line 的圖表為例:

<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart");
var chart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["2020/02/17", "", "2020/02/23", "", "2020/02/29", ""],
    datasets: [
      {
        type: "bar",
        backgroundColor: "rgba(54, 162, 235, 0.2)",
        borderColor: "rgba(54, 162, 235, 1)",
        borderWidth: 1,
        label: "標籤一",
        data: [60, 49, 72, 90, 100, 60]
      },
      {
        type: "line",
        label: "標籤二",
        data: [25, 13, 30, 35, 25, 40],
        lineTension: 0, // 曲線的彎度,設 0 表示直線
        fill: true // 是否填滿色彩
      }
    ]
  }
});
</script>

https://ithelp.ithome.com.tw/upload/images/20201009/20107810EsXFQBVgNo.png

其他圖表使用範例 ➜ Codepen 連結

運用 html、cssChart.js 達到圖表設計與排版效果(支援 RWD),詳細程式碼都放在 Codepen,以下為範例效果:

https://ithelp.ithome.com.tw/upload/images/20201009/20107810YLtweX5r78.png


參考資料

  1. Chart.js - 官方網站
  2. Chart.js - Samples 範例
  3. Chart.js - 說明文件
  4. 【前端軍火庫】Chart.js - 輕鬆完成資料視覺化

上一篇
【Day 22】如何使用 VS Code 內建工具做簡單的版本控制
下一篇
【Day 24】成為網頁設計師後,我再也不畫表格了! - Word to HTML 線上工具
系列文
從平面轉型成網頁設計的 UI/UX 設計師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言