در ارتباط با همین مطلب بخوانید



نمودار متحرک ساده با استفاده از HTML5/ CSS / jQuery - جی کوئری


تاریخ : سه شنبه,۲۱ دی ۱۳۹۵ تعداد بازدید :564

در این مقاله ه طور خلاصه بر سر اینکه چگونه می توانیم با CSS و jQuery  نمودار متحرک بسازیم توضیح داده شده است.

کد HTML

ساده ترین برای استفاده از دو عنصر داخل یک div است. یکی UL برای محور و ارزش های عمودی استفاده می شود. یکی دیگر برای محور افقی و ارزش به عنوان میله در نمودار استفاده می شود. برای ساختن این نمودار از عناصر html دیگری هم می توان استفاده کرد.

<div id="chart">
  <ul id="numbers">
    <li><span>100%</span></li>
    <li><span>90%</span></li>
    <li><span>80%</span></li>
    <li><span>70%</span></li>
    <li><span>60%</span></li>
    <li><span>50%</span></li>
    <li><span>40%</span></li>
    <li><span>30%</span></li>
    <li><span>20%</span></li>
    <li><span>10%</span></li>
    <li><span>0%</span></li>
  </ul>

  <ul id="bars">
    <li><div data-percentage="56" class="bar"></div><span>Option 1</span></li>
    <li><div data-percentage="33" class="bar"></div><span>Option 2</span></li>
    <li><div data-percentage="54" class="bar"></div><span>Option 3</span></li>
    <li><div data-percentage="94" class="bar"></div><span>Option 4</span></li>
    <li><div data-percentage="44" class="bar"></div><span>Option 5</span></li>
    <li><div data-percentage="23" class="bar"></div><span>Option 6</span></li>
  </ul>
</div>

کدcss

همانطور که کدHTMLبالا را می بینید، ما با استفاده از داده های صفات برای مقادیر درصد (ارتفاع میله)jQueryبرای تحریک آنها استفاده کنیم.

ما به سادگی می توانیم یک لیست به صورت عمودی و دیگری به صورت افقی بسازیم. لیست افقی دارای یک عنصر فرزند شامل میله می باشد، که ما با مقداردهی اولیه 0 ارتفاع قرار دهده تا بتوانیم درصد های خود را با استفاده از جی کوئری تنظیم کنیم.

@import url(http://fonts.googleapis.com/css?family=Roboto:400+700);
body {
background: #30303A;
font-family: Roboto;
}
#chart {
width: 650px;
height: 300px;
margin: 30px auto 0;
display: block;
}
#chart #numbers {
width: 50px;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
}
#chart #numbers li {
text-align: right;
padding-right: 1em;
list-style: none;
height: 29px;
border-bottom: 1px solid #444;
position: relative;
bottom: 30px;
}
#chart #numbers li:last-child {
height: 30px;
}
#chart #numbers li span {
color: #eee;
position: absolute;
bottom: 0;
right: 10px;
}
#chart #bars {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
width: 600px;
height: 300px;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
display: table-cell;
width: 100px;
height: 300px;
margin: 0;
text-align: center;
position: relative;
}
#chart #bars li .bar {
display: block;
width: 70px;
margin-left: 15px;
background: #49E;
position: absolute;
bottom: 0;
}
#chart #bars li .bar:hover {
background: #5AE;
cursor: pointer;
}
#chart #bars li .bar:hover:before {
color: white;
content: attr(data-percentage) "%";
position: relative;
bottom: 20px;
}
#chart #bars li span {
color: #eee;
width: 100%;
position: absolute;
bottom: -2em;
left: 0;
text-align: center;
}

کد JavaScript

آخرین قسمت، استفاده از JavaScript است. با استفاده از یک حلقه تمامی اقلام لیست و همچنین به میله و ارتفاع با استفاده از ویژگی درصد مقدار می دهیم.

$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data("percentage");

$(this).animate({
"height" : percentage + "%"
}, 1000);
});
});

خروجی نمودار متحرک ساده با استفاده از5  HTML/  CSS / jQuery


منبع: پورتال پادرا

برچسب ها :





این مقاله را دوست داشتید؟ آنرا به اشتراک بگذارید



دیدگاه خودتان را ارسال کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز با * علامت گذاری شده اند.






star TOP 10

  • مقالات
  • بیمارستان
  • دکتر
  • دارو


مطالب این سایت تنها جنبه اطلاع رسانی و آموزشی داشته و توصیه پزشکی تخصصی تلقی نمی شوند و نباید آنها را جایگزین مراجعه به پزشک جهت تشخیص و درمان دانست.
هشدار! تجويز و تعيين دوز دارو به عهده پزشک مي باشد و پورتال پادرا هيچگونه مسئوليتي در خصوص مصرف خود سرانه دارو ندارد