کد ایجاد نمودار درصد دار

کد ایجاد نمودار درصد دار

کد ایجاد نمودار درصد دار با این کد شما میتوانید نمودار دلخواه خود را ایجاد کنید و رنگ دلخواه را به ان اضافه کنید.برای تغییر درصد در کد کافیه اعداد داخل کد را ویرایش کنید.این نمودار با سی اس اس طراحی شده و کاملا واکنش گرا بوده.

دمو کد

<link rel="stylesheet" href="http://dl.codebazan.ir/uploads/1552357383.css">
<div class="charts">
  <span>چارت تیره</span>
  <div class="charts__chart chart--p100 chart--default" data-percent></div><!-- /.charts__chart -->
  <span>چارت ابی</span>
  <div class="charts__chart chart--p80 chart--blue" data-percent></div><!-- /.charts__chart -->
  <span>چارت سبز</span>
  <div class="charts__chart chart--p60 chart--green" data-percent></div><!-- /.charts__chart -->
  <span>چارت قرمز</span>
  <div class="charts__chart chart--p40 chart--red" data-percent></div><!-- /.charts__chart -->
  <span>چارت نارنجی</span>
  <div class="charts__chart chart--p20 chart--yellow" data-percent></div><!-- /.charts__chart -->
  <span>بچارت بنفش</span>
  <div class="charts__chart chart--p5 chart--grey" data-percent></div><!-- /.charts__chart -->
</div><!-- /.charts --><div style="display:none"><h1><a title="codebazan" href="https://codebazan.ir">codebazan</a></h1></div>

برای تست کد فوق میتوانید از ابزار پیش نمایش کدبازان استفاده نمایید