iT邦幫忙

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

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

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

  • 分享至 

  • xImage
  •  

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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言