南華大學圖資處 -教育訓練專區
南華大學 回首頁 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;  
   height:600px !important;
   }
}
  </style>
 
<canvas id="myChart" ></canvas>
 
<script>
const ctx = document.getElementById("myChart");
 
new Chart(ctx, {
  type: "radar", 
  data: {
    labels: ["速度", "力量", "耐力", "技巧", "團隊合作", "智力"], 
    datasets: [
      {
        label: "學生 A",
        data: [80, 90, 70, 85, 60, 75],
        backgroundColor: "rgba(54, 162, 235, 0.2)",
        borderColor: "rgba(54, 162, 235, 1)",
        pointBackgroundColor: "rgba(54, 162, 235, 1)"
      },
      {
        label: "學生 B",
        data: [60, 75, 85, 70, 80, 65],
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgba(255, 99, 132, 1)",
        pointBackgroundColor: "rgba(255, 99, 132, 1)"
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      r: {  
        beginAtZero: true,
        min: 0,
        max: 100, 
        ticks: {
          stepSize: 20 
        }
      }
    },
    plugins: {
      legend: {
        position: "top"
      }
    }
  }
});
 
 
</script>
























 
109-4-24教育訓練