퍼블리싱 수정 메모리-일간

src/main/webapp/m/css/style.css

@@ -14537,4 +14537,53 @@ main.sona_cont_measurement {
 	 padding: 5px;
 	 display: inline-block;
 	 cursor: pointer;
-}
+}
+
+.memory_daily_chart .container {
+    width: 290px;
+    height: 290px;
+    background-color: #E5E5E5;
+    border-radius: 50%;
+    transition: 0.3s;
+    z-index: 1;
+}
+
+.memory_daily_chart .center {
+    content: '';
+    background-color: #fff;
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+}
+
+.memory_daily_chart .data {
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    border-radius: 50%;
+    z-index: 2;
+}
+
+.memory_daily_chart .title1{
+    display: block;
+    width: 100%;
+    position:absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    font-weight: 400;
+    font-size:20px;
+    z-index: 4;
+  }
+
+  .memory_daily_chart .title1 span{
+    font-size: 14px;
+    display: block;
+    margin-bottom: 17px;
+  }

src/main/webapp/m/html/memory/memory_daily.html

@@ -69,7 +69,19 @@
 
         <!-- pie chart -->
         <div class="chart memory_daily_chart" data-percent="62.5">
-          <p class="title"><span>DAY</span> 173d</p>
+          
+          <div class="container">
+            <!-- conic-gradient(from 시작각도deg, 색상, 범위각도deg, 배경색(투명) 0) -->
+            <div class="data" style="background: conic-gradient(from 45deg, #C4459D 5deg, #00ff0000 0)"></div>
+            <div class="data" style="background: conic-gradient(from 56deg, #45C4A7 2deg, #00ff0000 0)"></div>
+            <div class="data" style="background: conic-gradient(from 120deg, #C49845 7deg, #00ff0000 0)"></div>
+            <div class="data" style="background: conic-gradient(from 160deg, #BAC445 13deg, #00ff0000 0)"></div>
+            <div class="data" style="background: conic-gradient(from 180deg, #C44545 2deg, #00ff0000 0)"></div>
+            <div class="data" style="background: conic-gradient(from 200deg, #4593C4 1deg, #00ff0000 0)"></div>
+            <span class="center"></span>
+          </div>
+
+          <p class="title1"><span>DAY</span> 173d</p>
 
           <ul class="hour">
             <li>0</li>
@@ -88,7 +100,6 @@
         </div>
         <!-- //pie chart -->
 
-
         <div class="fix_icon">
           <button type="button"><img src="../../img/ico_image_grey_24.png" alt=""></button>
           <button type="button"><img src="../../img/ico_share_grey_24.png" alt=""></button>
@@ -133,21 +144,6 @@
     </nav>
     <!-- //iyu_nav -->
 
-
-  	<script>
-    $('.memory_daily_chart').easyPieChart({
-      barColor: '#FF9C01',
-      trackColor: '#E5E5E5',
-      scaleColor: '#ccc',
-      lineCap: 'butt',
-      lineWidth: 55,
-      size: 200,
-      animate: 1000,
-      onStart: $.noop,
-      onStop: $.noop
-    });
-  	</script>
-
 </body>
 
 </html>