南華大學圖資處 -教育訓練專區
南華大學 回首頁 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").getContext("2d");
 
    const scatterData = {
      datasets: [{
        label: "學生資料",
        data: [
          { x: 150, y: 45 },
          { x: 155, y: 50 },
          { x: 160, y: 55 },
          { x: 165, y: 60 },
          { x: 170, y: 65 },
          { x: 175, y: 70 },
          { x: 180, y: 80 },
          { x: 185, y: 85 }
        ],
        backgroundColor: "rgba(75, 192, 192, 0.7)"
      }]
    };
 
    const scatterChart = new Chart(ctx, {
      type: "scatter",
      data: scatterData,
      options: {
        scales: {
          x: {
            title: {
              display: true,
              text: "身高 (cm)"
            }
          },
          y: {
            title: {
              display: true,
              text: "體重 (kg)"
            }
          }
        }
      }
    });
  </script>























 
109-4-24教育訓練