سلام یک نمودار دایره ای دارم که از پایگاه اطلاعاتی عدد میگیره و به شکل نمودار دایره ای نشان میده
سایز آن را بر اساس پیکسل تنظیم کردم
اگر بخواهم به صورت ریسپانسیو دربیارم
باید چکار کنم
اگر چنین کاری امکانش نیست راهنماییم کنید دقیقا باید چکار کنم که واکنشگرا باشد
کدها:
<style>
@property --p{
syntax: '<number>';
inherits: true;
initial-value: 0;
}
.pie {
--p:<?php
$sql="SELECT *from adminpost";
$result=mysqli_query($conn,$sql);
$row=mysqli_num_rows($result);
echo $row;
?>;
--b:16px;
--c:#9e36ff;
--w:150px;
width:var(--w);
aspect-ratio:1;
position:relative;
display:inline-grid;
margin:5px;
place-content:center;
font-size:25px;
font-weight:bold;
font-family:sans-serif;
background-color: white;
border-radius: 100%;
border: black;
color: white;;
background: red;
transition: width 2s, height 4s;
}
.pie:before,
.pie:after {
content:"";
position:absolute;
border-radius:50%;
}
.pie:before {
inset:0;
background:
radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
inset:calc(50% - var(--b)/2);
background:var(--c);
transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
animation:p 1s .5s both;
}
.no-round:before {
background-size:0 0,auto;
}
.no-round:after {
content:none;
}
@keyframes p {
from{--p:0}
}
.int-chart{
background-color: #282828;
border-radius: 100%;
width: 119px;
height: 119px;
text-align: center;
line-height: 110px;
}
.pie{
animation-name: ipo;
animation-duration: 1.5s;
animation-fill-mode: backwards;
}
@keyframes ipo{
0%{
--p: 0;
}
100%{
--p:<?php
$sql="SELECT *from adminpost";
$result=mysqli_query($conn,$sql);
$row=mysqli_num_rows($result);
echo $row;
?>;
}
}
<div class="pie" style="">
<div class="int-chart">
<?php
$sql="SELECT *from adminpost";
$result=mysqli_query($conn,$sql);
$row=mysqli_num_rows($result);
echo $row;
?>
</div>
</div>
درود خوبی...
برای رسپانسیو کردن یک المان یا عنصر از مدیا کوئری CSS یا گرید بوت استرپ استفاده کنید.
پیوند های زیر:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://getbootstrap.com/docs/5.2/layout/grid/
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟