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























 
首頁 > 長條圖
Windows 雷達版 - 校務系統
工讀管理系統
活動管理系統
個人資料保護
校內分機查詢
其他常見問題
操作手冊
網頁圖表介紹

長條圖 圖餅圖 折線圖 橫條圖 甜甜圈圖 雷達圖 極品圖 氣泡圖 散佈圖

 
    <script src="https://www3.nhu.edu.tw/js/public/chart.js"></script>
  <style>
    #myChart {
  width:600px;
      margin: 20px auto;
    }
 
@media screen and (max-width: 736px) {
#myChart {
width:400px;  
   }
}
  </style>
 
  <canvas id="myChart"></canvas>
 
  <script>
    const ctx = document.getElementById("myChart").getContext("2d");
    const myChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["大一", "大二", "大三", "大四"],
        datasets: [{
          label: "人數",
          data: [820, 150, 100, 80],
          backgroundColor: [
            "rgba(75, 192, 192, 0.5)",
            "rgba(153, 102, 255, 0.5)",
            "rgba(255, 159, 64, 0.5)",
            "rgba(255, 99, 132, 0.5)"
          ],
          borderColor: [
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)",
            "rgba(255, 99, 132, 1)"
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: false, 
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: "top"
          },
          title: {
            display: true,
            text: "各年級學生人數"
          }
        },
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
























 
test