전체학습현황 그래프 수정
This commit is contained in:
@@ -31,55 +31,54 @@ include_once 'header.php';
|
||||
<i class="fa-solid fa-ellipsis-vertical text-gray-300"></i>
|
||||
</h3>
|
||||
<!-- SVG Bar Chart -->
|
||||
<div class="relative w-full" style="height:200px;">
|
||||
<svg viewBox="0 0 280 180" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 격자선 & Y축 레이블 -->
|
||||
<!-- y=0 → svg y=155, y=1800 → svg y=15. 범위 140px, 단위 1800 -->
|
||||
<!-- y_svg = 155 - (val/1800)*140 -->
|
||||
<div class="relative w-full" style="height:240px;">
|
||||
<svg viewBox="0 0 320 210" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- y=0→svg y=175, y=1800→svg y=10. 범위 165px -->
|
||||
<!-- y_svg = 175 - (val/1800)*165 -->
|
||||
|
||||
<!-- 격자선 -->
|
||||
<line x1="36" y1="155" x2="270" y2="155" stroke="#e5e7eb" stroke-width="1"/>
|
||||
<line x1="36" y1="120" x2="270" y2="120" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
|
||||
<line x1="36" y1="85" x2="270" y2="85" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
|
||||
<line x1="36" y1="50" x2="270" y2="50" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
|
||||
<line x1="36" y1="15" x2="270" y2="15" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
|
||||
<line x1="42" y1="175" x2="315" y2="175" stroke="#e5e7eb" stroke-width="1"/>
|
||||
<line x1="42" y1="134" x2="315" y2="134" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
|
||||
<line x1="42" y1="93" x2="315" y2="93" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
|
||||
<line x1="42" y1="52" x2="315" y2="52" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
|
||||
<line x1="42" y1="10" x2="315" y2="10" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
|
||||
|
||||
<!-- Y축 레이블 -->
|
||||
<text x="30" y="158" text-anchor="end" font-size="8" fill="#9ca3af">0</text>
|
||||
<text x="30" y="123" text-anchor="end" font-size="8" fill="#9ca3af">450</text>
|
||||
<text x="30" y="88" text-anchor="end" font-size="8" fill="#9ca3af">900</text>
|
||||
<text x="30" y="53" text-anchor="end" font-size="8" fill="#9ca3af">1350</text>
|
||||
<text x="30" y="18" text-anchor="end" font-size="8" fill="#9ca3af">1800</text>
|
||||
<text x="38" y="178" text-anchor="end" font-size="11" fill="#9ca3af">0</text>
|
||||
<text x="38" y="137" text-anchor="end" font-size="11" fill="#9ca3af">450</text>
|
||||
<text x="38" y="96" text-anchor="end" font-size="11" fill="#9ca3af">900</text>
|
||||
<text x="38" y="55" text-anchor="end" font-size="11" fill="#9ca3af">1350</text>
|
||||
<text x="38" y="13" text-anchor="end" font-size="11" fill="#9ca3af">1800</text>
|
||||
|
||||
<!-- Y축 라인 -->
|
||||
<line x1="36" y1="10" x2="36" y2="155" stroke="#e5e7eb" stroke-width="1"/>
|
||||
<line x1="42" y1="8" x2="42" y2="175" stroke="#d1d5db" stroke-width="1"/>
|
||||
|
||||
<!-- 막대 그래프 데이터 -->
|
||||
<!-- 삼안: 520명 → (520/1800)*140=40.4px → y=155-40=115 -->
|
||||
<!-- 한맥: 450명 → (450/1800)*140=35px → y=155-35=120 -->
|
||||
<!-- PTC: 120명 → (120/1800)*140=9.3px → y=155-9=146 -->
|
||||
<!-- 바른: 74명 → (74/1800)*140=5.7px → y=155-6=149 -->
|
||||
<!-- 장현: 90명 → (90/1800)*140=7px → y=155-7=148 -->
|
||||
<!-- 한라산업: 1800명 → y=15 -->
|
||||
<!-- 막대 너비 36, 간격 8, 6개 막대, x시작 50 -->
|
||||
<!-- 한맥:450 → h=(450/1800)*165=41.25 → y=175-41=134 -->
|
||||
<!-- 삼안:520 → h=47.7 → y=127 -->
|
||||
<!-- 한라:1800→ h=165 → y=10 -->
|
||||
<!-- PTC:120 → h=11 → y=164 -->
|
||||
<!-- 바른:74 → h=6.8 → y=168 -->
|
||||
<!-- 장현:90 → h=8.25 → y=167 -->
|
||||
|
||||
<!-- 한맥기술 -->
|
||||
<rect x="44" y="120" width="28" height="35" fill="#114b3d" rx="2"/>
|
||||
<text x="58" y="168" text-anchor="middle" font-size="7" fill="#6b7280">한맥</text>
|
||||
<rect x="50" y="134" width="36" height="41" fill="#114b3d" rx="3"/>
|
||||
<text x="68" y="194" text-anchor="middle" font-size="10" fill="#6b7280">한맥</text>
|
||||
<!-- 삼안 -->
|
||||
<rect x="82" y="115" width="28" height="40" fill="#114b3d" rx="2"/>
|
||||
<text x="96" y="168" text-anchor="middle" font-size="7" fill="#6b7280">삼안</text>
|
||||
<!-- 한라산업 (가장 큰 값) -->
|
||||
<rect x="120" y="15" width="28" height="140" fill="#114b3d" rx="2"/>
|
||||
<text x="134" y="168" text-anchor="middle" font-size="7" fill="#6b7280">한라산업</text>
|
||||
<rect x="94" y="127" width="36" height="48" fill="#114b3d" rx="3"/>
|
||||
<text x="112" y="194" text-anchor="middle" font-size="10" fill="#6b7280">삼안</text>
|
||||
<!-- 한라산업 -->
|
||||
<rect x="138" y="10" width="36" height="165" fill="#114b3d" rx="3"/>
|
||||
<text x="156" y="194" text-anchor="middle" font-size="10" fill="#6b7280">한라산업</text>
|
||||
<!-- PTC -->
|
||||
<rect x="158" y="140" width="28" height="15" fill="#1d6b56" rx="2"/>
|
||||
<text x="172" y="168" text-anchor="middle" font-size="7" fill="#6b7280">PTC</text>
|
||||
<rect x="182" y="164" width="36" height="11" fill="#1d6b56" rx="3"/>
|
||||
<text x="200" y="194" text-anchor="middle" font-size="10" fill="#6b7280">PTC</text>
|
||||
<!-- 바른컨설턴트 -->
|
||||
<rect x="196" y="148" width="28" height="7" fill="#1d6b56" rx="2"/>
|
||||
<text x="210" y="168" text-anchor="middle" font-size="6.5" fill="#6b7280">바른</text>
|
||||
<rect x="226" y="168" width="36" height="7" fill="#1d6b56" rx="3"/>
|
||||
<text x="244" y="194" text-anchor="middle" font-size="10" fill="#6b7280">바른</text>
|
||||
<!-- 장현산업 -->
|
||||
<rect x="234" y="145" width="28" height="10" fill="#1d6b56" rx="2"/>
|
||||
<text x="248" y="168" text-anchor="middle" font-size="6.5" fill="#6b7280">장현</text>
|
||||
<rect x="270" y="167" width="36" height="8" fill="#1d6b56" rx="3"/>
|
||||
<text x="288" y="194" text-anchor="middle" font-size="10" fill="#6b7280">장현</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,57 +131,54 @@ include_once 'header.php';
|
||||
</div>
|
||||
</div>
|
||||
<!-- SVG Line Chart -->
|
||||
<div class="relative w-full" style="height:200px;">
|
||||
<svg viewBox="0 0 280 180" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 격자 범위: y=0→svg y=155, y=800→svg y=15. 140px 높이 -->
|
||||
<!-- x 범위: x=36 ~ x=270 (6점) -->
|
||||
<!-- 날짜: 01/20,01/21,01/22,01/23,01/24,01/26 -->
|
||||
<!-- 값: 220, 310, 450, 480, 570, 590 -->
|
||||
<!-- y_svg = 155 - (val/800)*140 -->
|
||||
<!-- 220→116.5, 310→101.8, 450→76.25, 480→71.5, 570→55.25, 590→52.0 -->
|
||||
<!-- x 간격: (270-36)/5 = 46.8 → 36,82.8,129.6,176.4,223.2,270 -->
|
||||
<div class="relative w-full" style="height:240px;">
|
||||
<svg viewBox="0 0 320 210" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- y=0→svg y=175, y=800→svg y=10. 범위 165px -->
|
||||
<!-- y_svg = 175 - (val/800)*165 -->
|
||||
<!-- x: x=42 ~ x=310 (6점), 간격 53.6 -->
|
||||
<!-- 220→129.6, 310→111.1, 450→82.7, 480→76.9, 570→55.1, 590→51.4 -->
|
||||
|
||||
<!-- 격자선 -->
|
||||
<line x1="36" y1="155" x2="270" y2="155" stroke="#e5e7eb" stroke-width="1"/>
|
||||
<line x1="36" y1="120" x2="270" y2="120" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
|
||||
<line x1="36" y1="85" x2="270" y2="85" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
|
||||
<line x1="36" y1="50" x2="270" y2="50" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
|
||||
<line x1="36" y1="15" x2="270" y2="15" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
|
||||
<line x1="42" y1="175" x2="315" y2="175" stroke="#e5e7eb" stroke-width="1"/>
|
||||
<line x1="42" y1="134" x2="315" y2="134" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
|
||||
<line x1="42" y1="93" x2="315" y2="93" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
|
||||
<line x1="42" y1="52" x2="315" y2="52" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
|
||||
<line x1="42" y1="10" x2="315" y2="10" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="4,3"/>
|
||||
|
||||
<!-- Y축 레이블 -->
|
||||
<text x="30" y="158" text-anchor="end" font-size="8" fill="#9ca3af">0</text>
|
||||
<text x="30" y="123" text-anchor="end" font-size="8" fill="#9ca3af">200</text>
|
||||
<text x="30" y="88" text-anchor="end" font-size="8" fill="#9ca3af">400</text>
|
||||
<text x="30" y="53" text-anchor="end" font-size="8" fill="#9ca3af">600</text>
|
||||
<text x="30" y="18" text-anchor="end" font-size="8" fill="#9ca3af">800</text>
|
||||
<text x="38" y="178" text-anchor="end" font-size="11" fill="#9ca3af">0</text>
|
||||
<text x="38" y="137" text-anchor="end" font-size="11" fill="#9ca3af">200</text>
|
||||
<text x="38" y="96" text-anchor="end" font-size="11" fill="#9ca3af">400</text>
|
||||
<text x="38" y="55" text-anchor="end" font-size="11" fill="#9ca3af">600</text>
|
||||
<text x="38" y="13" text-anchor="end" font-size="11" fill="#9ca3af">800</text>
|
||||
|
||||
<!-- Y축 라인 -->
|
||||
<line x1="36" y1="10" x2="36" y2="155" stroke="#e5e7eb" stroke-width="1"/>
|
||||
<line x1="42" y1="8" x2="42" y2="175" stroke="#d1d5db" stroke-width="1"/>
|
||||
|
||||
<!-- 라인 경로 -->
|
||||
<polyline
|
||||
points="36,117 83,102 130,77 177,71 223,56 270,52"
|
||||
points="42,130 96,111 150,83 204,77 258,55 310,51"
|
||||
fill="none"
|
||||
stroke="#0d9488"
|
||||
stroke-width="2"
|
||||
stroke-width="2.5"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
|
||||
<!-- 데이터 포인트 (원) -->
|
||||
<circle cx="36" cy="117" r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
|
||||
<circle cx="83" cy="102" r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
|
||||
<circle cx="130" cy="77" r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
|
||||
<circle cx="177" cy="71" r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
|
||||
<circle cx="223" cy="56" r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
|
||||
<circle cx="270" cy="52" r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
|
||||
<circle cx="42" cy="130" r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
|
||||
<circle cx="96" cy="111" r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
|
||||
<circle cx="150" cy="83" r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
|
||||
<circle cx="204" cy="77" r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
|
||||
<circle cx="258" cy="55" r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
|
||||
<circle cx="310" cy="51" r="4.5" fill="white" stroke="#0d9488" stroke-width="2.5"/>
|
||||
|
||||
<!-- X축 레이블 -->
|
||||
<text x="36" y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/20</text>
|
||||
<text x="83" y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/21</text>
|
||||
<text x="130" y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/22</text>
|
||||
<text x="177" y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/23</text>
|
||||
<text x="223" y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/24</text>
|
||||
<text x="270" y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/26</text>
|
||||
<text x="42" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/20</text>
|
||||
<text x="96" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/21</text>
|
||||
<text x="150" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/22</text>
|
||||
<text x="204" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/23</text>
|
||||
<text x="258" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/24</text>
|
||||
<text x="310" y="194" text-anchor="middle" font-size="10" fill="#9ca3af">01/26</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user