南華大學圖資處 -教育訓練專區
南華大學 回首頁 English























 
首頁 > 長條圖,一個頁面,多個圖表
網頁載入News資訊
Windows 雷達版 - 校務系統
工讀管理系統
活動管理系統
個人資料保護
校內分機查詢
其他常見問題
操作手冊
網頁圖表介紹
新版成員介紹頁面置入1
新版成員介紹頁面置入2

長條圖 長條圖,一個頁面,多個圖表 圖餅圖 折線圖 橫條圖 甜甜圈圖 雷達圖 極品圖 氣泡圖 散佈圖
 


 <script src="https://www3.nhu.edu.tw/js/public/chart.js"></script>
 
  <style>
    #chartWrapper {
      width: 600px;
      margin: 40px auto;
    }
  </style>
  
  
  
<div id="chartWrapper">
  <canvas id="myChart"></canvas>
  
  <br><br><br>
  
  <canvas id="myChart2"></canvas>
</div>
 
<script>
 
//第一張圖
const ctx = document.getElementById("myChart").getContext("2d");
 
new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["大學部", "碩士班"],   // X 軸：學制
    datasets: [
      {
        label: "110 年度",
        data: [1200, 300],          // 大學部、碩士班
        backgroundColor: "rgba(54, 162, 235, 0.7)"
      },
      {
        label: "111 年度",
        data: [1150, 320],
        backgroundColor: "rgba(255, 99, 132, 0.7)"
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: "110 / 111 年度各學制招生人數比較",
        font: { size: 18 }
      },
      legend: {
        position: "top"
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: "招生人數"
        }
      }
    }
  }
});
 
 
 
 
 
 
//第二張圖
const ctx2 = document.getElementById("myChart2").getContext("2d");
 
new Chart(ctx2, {
  type: "bar",
  data: {
    labels: ["大學部", "碩士班"],   // X 軸：學制
    datasets: [
      {
        label: "112 年度",
        data: [1200, 300],          // 大學部、碩士班
        backgroundColor: "rgba(54, 162, 235, 0.7)"
      },
      {
        label: "113 年度",
        data: [1450, 520],
        backgroundColor: "rgba(255, 99, 132, 0.7)"
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: "112 / 113 年度各學制招生人數比較",
        font: { size: 18 }
      },
      legend: {
        position: "top"
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: "招生人數"
        }
      }
    }
  }
});
</script>























 
test