iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
0
Modern Web

30天學習30套前端技術(2018年)系列 第 9

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

example1

對設計師或開發人員,淺顯易懂的的JavaScript圖表應用

GitHub Star: 34,100
Javascripting Overall: 97%
瀏覽器: ChromeFirefoxIE9+
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- Chart.js v2.4.0 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    
  • npm

      $ npm install chart.js --save
    
  • Bower

      $ bower install chart.js --save
    

《範例》

  • 長條圖

      <canvas id="example" width="400" height="200"></canvas>
      <script>
      	var ctx = document.getElementById( "example" ),
      		example = new Chart(ctx, {
      			// 參數設定[註1]
      			type: "bar", // 圖表類型
      			data: {
      				labels: [ "Red", "Green", "Blue" ], // 標題
      				datasets: [{
      					label: "# of Votes", // 標籤
      					data: [ 12, 19, 3 ], // 資料
      					backgroundColor: [ // 背景色
      					"#FF0000",
      					"#00FF00",
      					"#0000FF",
      					],
      					borderWidth: 1 // 外框寬度
      				}]
      			}
      		});
      </script>
    

    [註1]

    參數 描述 選項
    type 圖表類型 li|nebarradarpolarAreapiedoughnutbubble
    data.labels 標題
    data.datasets.label 標籤
    data.datasets.data 資料
    data.datasets.backgroundColor 背景色
    data.datasets.borderWidth 外框寬度

《延伸》

  1. Chart.js | Open source HTML5 Charts for your website
  2. chartjs/Chart.js: Simple HTML5 Charts using the tag

上一篇
[十分鐘學習] Textillate.js - 絢麗文字動畫特效
下一篇
[十分鐘學習] highlight.js - 程式碼上色外掛
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言