끝이기를

static/barGraph.js

@@ -0,0 +1,49 @@
+const canvas1 = document.getElementById('barGraph1');
+const ctx1 = canvas1.getContext('2d');
+
+const canvas2 = document.getElementById('barGraph2');
+const ctx2 = canvas2.getContext('2d');
+
+// 데이터
+const data1 = [50];
+const data2 = [80];
+
+// 초기 설정
+const barWidth = 45;
+const barSpacing = 20;
+const maxBarHeight = 200;
+const animationDuration = 1000; // in milliseconds
+const framesPerSecond = 60;
+const frames = animationDuration / 1000 * framesPerSecond;
+const barColors1 = ['#007bff'];
+const barColors2 = ['#ff5733'];
+
+let currentFrame = 0;
+
+function drawBar(ctx, x, height, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, canvas1.height - height, barWidth, height);
+}
+
+function drawDualGraph() {
+  ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
+  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+
+  const startX = (canvas1.width - (barWidth + barSpacing) * data1.length + barSpacing) / 2;
+
+  for (let i = 0; i < data1.length; i++) {
+    const barHeight1 = (currentFrame / frames) * data1[i] * (maxBarHeight / 100);
+    const barHeight2 = (currentFrame / frames) * data2[i] * (maxBarHeight / 100);
+    const x = startX + (barWidth + barSpacing) * i;
+
+    drawBar(ctx1, x, barHeight1, barColors1[i]);
+    drawBar(ctx2, x, barHeight2, barColors2[i]);
+  }
+
+  if (currentFrame < frames) {
+    currentFrame++;
+    requestAnimationFrame(drawDualGraph);
+  }
+}
+
+drawDualGraph();

static/result.css

@@ -1,7 +1,7 @@
 body {
   background-color: #f8fafd;
-  margin-left: 9%;
-  margin-right: 9%;
+  margin-left: 15%;
+  margin-right: 15%;
 }
 
 .mainbar {
@@ -84,3 +84,23 @@ a:active {
   flex-direction: column;
   align-items: center;
 }
+
+.graph {
+  width:80%;
+}
+
+#barGraph1 {
+  padding-right: 50px;
+}
+
+.graphh{
+  display: flex;
+}
+
+#a {
+  padding-right: 15px;
+}
+
+#b {
+  padding-left: 15px;
+}

templates/result.html

@@ -23,6 +23,18 @@ <h2>Tension Percentage</h2>
             <canvas id="tensionGraph" width="300" height="300"></canvas>
             <script src="../static/tensionGraph.js"></script>
         </div>
+        <div class='graph'>
+           <canvas id="barGraph1" width="40" height="300"></canvas>
+            <canvas id="barGraph2" width="40" height="300"></canvas>
+        </div>
+        <div class='graphh'>
+          <div id='a'>
+            유창성
+          </div>
+          <div id='b'>
+            발음 정확도
+          </div>
+        </div>
         <div>
             <!--발표script 받아서 챗지가 총평함-->
             <h2>발표 내용 평가</h2>
@@ -35,5 +47,6 @@ <h2>발음 평가</h2>
             <script src="../static/pron_result.js"></script>
         </div>
     </div>
+    <script src="../static/barGraph.js"></script>
   </body>
 </html>