وب گردی
جدیدترین ویدیوها
پربازدیدترین ویدیوها
کانال تلگرام پورتال پادرا

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

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


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

در این مقاله ه طور خلاصه بر سر اینکه چگونه می توانیم با 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


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

برچسب ها :





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




دیدگاه




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