TestResult:자존감: Difference between revisions

No edit summary
No edit summary
Line 1: Line 1:
<!DOCTYPE html>
<html lang="ko">
<html lang="ko">
<head>
<head>
   <meta charset="UTF-8" />
   <meta charset="UTF-8" />
   <title>자존감 점수 분포 (구간별)</title>
   <title>자존감 점수 분포 (7점 단위)</title>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
</head>
<body>
<body>
   <canvas id="groupedBarChart" width="700" height="400"></canvas>
   <canvas id="barChart7pt" width="700" height="400"></canvas>


   <script>
   <script>
     const urlParams = new URLSearchParams(window.location.search);
     const urlParams = new URLSearchParams(window.location.search);
     const selectedRange = urlParams.get('range'); // 예: "41~45"
     const selectedRange = urlParams.get('range'); // 예: "45~51"


     const labels = [
     const labels = [
       "0~30", "31~35", "36~40", "41~45", "46~50",
       "0~30", "31~37", "38~44", "45~51", "52~58",
       "51~55", "56~60", "61~65", "66~70", "71~75",
       "59~65", "66~72", "73~79", "80~86", "87~93", "94~100"
      "76~80", "81~85", "86~90", "91~95", "96~100"
     ];
     ];


     const dataValues = [
     const dataValues = [
       2, 8, 25, 59, 128,
       2, 15, 61, 182, 419,
       199, 231, 267, 272, 280,
       744, 1003, 1038, 817, 492, 228
      285, 278, 261, 237, 141
     ];
     ];


Line 29: Line 26:
     );
     );


     const ctx = document.getElementById('groupedBarChart').getContext('2d');
     const ctx = document.getElementById('barChart7pt').getContext('2d');
     const chart = new Chart(ctx, {
     const chart = new Chart(ctx, {
       type: 'bar',
       type: 'bar',
Line 47: Line 44:
           title: {
           title: {
             display: true,
             display: true,
             text: '자존감 점수 분포 (구간별 합산)'
             text: '자존감 점수 분포 (7점 단위 구간)'
           },
           },
           legend: { display: false },
           legend: { display: false },