canvas圖表-Chart js – 原意筆記本

圖表的東西在公部門是常用的東西，在開發網站時因為有這方面的需求，要合用於 rwd 框架，又要可以方便節約頻寬，如果直接使用圖片的話不只對主機運算上有較大的負擔，在傳輸上也會比較大，也因此 canvas 就有這方面的優勢了，這套 Chart js 使用上簡單，只要參照官網的參數與設定寫在 js 內就可完成所需的表格。

See the Pen canvas圖表-Chart js by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

<html>

<head>
  <title>Stacked Bar Chart</title>
  <meta charset="utf-8" />
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!--<script src="../dist/Chart.js"></script>-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
  <style>
    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
  </style>
</head>

<body>
  <div style="width: 100%">
    <canvas id="canvas1"></canvas>
  </div>
  <div style="width: 100%">
    <canvas id="canvas2"></canvas>
  </div>
</body>

</html>

<html>

<head>

<title>Stacked Bar Chart</title>

<style>

canvas {

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

var canvas1Data = {
  labels: ["學習目標清楚", "學習內容有幫助", "學習內容條理分明", "學習內容生動有趣", "課程時間安排恰當"],
  datasets: [{
    /*label: '一、課程內容',	*/						
    backgroundColor: ["rgba(151,187,205,0.5)", "#eee", "#333", "rgba(151,187,205,0.5)", "#eee", "#333"],
    data : [4.47,4.52,4.35,4.41,4.47]
  }]
};

var canvas2Data = {
  labels: ["學習環境合適", "教材清楚", "設備完善"],
  datasets: [{
    /*label: '一、課程內容',	*/						
    backgroundColor: ["rgba(151,187,205,0.5)", "#eee", "#333"],
    data : [4.47,4.52,4.35]
  }]
};


window.onload = function() {
  var ctx = document.getElementById("canvas1").getContext("2d");
  window.myBar = new Chart(ctx, {
    type: 'bar',
    data: canvas1Data,
    options: {
      /*title:{
          display:true,
          text:"一、課程內容"
      },*/
      /*tooltips: {
          mode: 'label'
      },*/
      legend: {
        display: false
      },
      responsive: true
      /*scales: {
          xAxes: [{
              stacked: true,
          }],
          yAxes: [{
              stacked: true
          }]
      }*/
    }
  });
  
  var ctx = document.getElementById("canvas2").getContext("2d");
  window.myBar = new Chart(ctx, {
    type: 'bar',
    data: canvas2Data,
    options: {
      legend: {
        display: false
      },
      responsive: true
    }
  });
    
};// JavaScript Document

var canvas1Data = {

labels: ["學習目標清楚", "學習內容有幫助", "學習內容條理分明", "學習內容生動有趣", "課程時間安排恰當"],

datasets: [{

/*label: '一、課程內容', */

backgroundColor: ["rgba(151,187,205,0.5)", "#eee", "#333", "rgba(151,187,205,0.5)", "#eee", "#333"],

data : [4.47,4.52,4.35,4.41,4.47]

}]

};

var canvas2Data = {

labels: ["學習環境合適", "教材清楚", "設備完善"],

datasets: [{

/*label: '一、課程內容', */

backgroundColor: ["rgba(151,187,205,0.5)", "#eee", "#333"],

data : [4.47,4.52,4.35]

}]

};

window.onload = function() {

var ctx = document.getElementById("canvas1").getContext("2d");

window.myBar = new Chart(ctx, {

type: 'bar',

data: canvas1Data,

options: {

/*title:{

display:true,

text:"一、課程內容"

},*/

/*tooltips: {

mode: 'label'

},*/

legend: {

display: false

responsive: true

/*scales: {

xAxes: [{

stacked: true,

}],

yAxes: [{

stacked: true

}]

}*/

}

});

var ctx = document.getElementById("canvas2").getContext("2d");

window.myBar = new Chart(ctx, {

type: 'bar',

data: canvas2Data,

options: {

legend: {

display: false

responsive: true

}

});

};// JavaScript Document

options: { legend: { display: false },} 是指不顯示 label 切換按鈕
window.myBar = new Chart(ctx, { }); 指向 html 內的 #canvas2
JS 內的 var canvas2Data = { };為圖表內的資料內容
寫過 Version: 1.0.2 與目前的新版，在js的寫法上差不少，但都可達到rwd的效果，但舊版上在畫面柱條會很肥滿

資料來源

官網新版 Chart.js – Version: 1.0.2

標籤雲

資料來源