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























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

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

<script src="https://www3.nhu.edu.tw/js/public/chart.js"></script>
 
  <style>
#pieChart {
  width:600px;
      margin: 20px auto;
    }
 
@media screen and (max-width: 736px) {
#pieChart {
width:400px;  
   }
}
  </style>
 
  <canvas id="pieChart"></canvas>
  <script>
    const ctx = document.getElementById("pieChart").getContext("2d");
 
    const pieChart = new Chart(ctx, {
      type: "pie", 
      data: {
        labels: ["資工系", "企管系", "設計系", "外文系"],
        datasets: [{
          label: "人數",
          data: [300, 200, 150, 100], 
          backgroundColor: [
            "rgba(255, 99, 132, 0.6)",
            "rgba(54, 162, 235, 0.6)",
            "rgba(255, 206, 86, 0.6)",
            "rgba(75, 192, 192, 0.6)"
          ],
          borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)"
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        plugins: {
          title: {
            display: true,
            text: "大學系所人數比例圖"
          },
          legend: {
            position: "bottom"
          }
        }
      }
    });
  </script>
 
























 
109-4-24教育訓練