محمدسینا معراجیان
محمدسینا معراجیان
خواندن ۶ دقیقه·۵ سال پیش

ساخت نمودار با Pure CSS

تو این مقاله میخوایم با سی اس اس خام (شاید وانیلا سی اس اس) چندتا نمودار باهم درست کنیم البته این کار مزایا و معایبی داره که آخر مقاله بهش اشاره میکنیم ولی در کل هدف تمرین و بالا بردن توانایی های سی اس اسمون هست.

نمودار Pie

خود من اوایل فکر میکردم ساخت این جور نمودارا باید خیلی سخت باشه چون ایده‌ی خاصی راجع بهش نداشتم ولی اینجا آسون ترین نمودارمون همینه نه چون بقیه ساختشون سخته چون CSS3 نازنین ما خیلی چیزا رو برامون مهیا کرده

برای ساخت این چارت از conic-gradient (طیف مخروطی) استفاده میکنیم که از اسمش معلومه چیکار میکنه و به این شکل هم کار میکنه :ییی

conic-gradient([ from <angle> ]? [ at <position> ]?, <angular-color-stop-list>)

حالا یه مثال میزنیم یه المان (دیو!) بسازید توی html تون و بهش کلاس(نِیم) Pie بدید حالا توی CSS تون کد زیر رو وارد کنید:

.pie{
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  width: 230px;
  height:230px;
  border-radius:50%;
}

همونطور که میبینید شکلی مثل شکل زیر درست میشه که شباهتی به نمودار ما داره با این تفاوت که طبق اسمی که گفتیم طیف هست و مثل پای چارت‌هایی که میبینیم نیست.

برای اینکه به نتیجه دلخواهمون برسیم باید از خاصیتی به اسم Hard stop استفاده کنیم که از اسمش باز هم معلومه که قراره چیکار کنه، کدمون میشه:

.pie{
  background: conic-gradient(lime 40%, yellow 0 70%, red 0);
  width: 230px;
  height:230px;
  border-radius:50%;
}

و نهایتا نموداریمون میشه:

مرسی CSS !

نمودار میله‌ای

ایندفعه خیلی سریع شروع کنیم، فقط بگم که برای این نمودار از سَس (SASS) استفاده میکنیم تا برامون کلاس‌های همه‌ی درصد هارو اتوماتیک بسازه(انتظار ندارید همرو دستی بزنیم که طبعا؟سَس هم که ترس و درد نداره) اندفعه از خاصیت بکگراند repeating-linear-gradient استفاده میکنیم تا خط های(گرید) پشت نمودارمون رو بسازیم. دوباره اول تگ html مون رو میذاریم کافیه کد زیر رو داخل فایل html تون بذارید:

  <dd class=&quotpercentage percentage-23&quot/>
  <dd class=&quotpercentage percentage-50&quot/>

دوباره تقریبا تنها نکته‌ی کدمون همون بکگراند هست که سینتکسش اینطوریه:

background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

و ما به شکل زیر ازش استفاده میکنیم، فقط بعدش برای نمودارها از سودو المنت اَفتر استفاده میکنیم و به نظرم کاملا واضحه اگر مشکلی بود میتونم توی سوالا بهتون پاسخ بدم باز.فایل سی اس اسمون(سَس البته):

.percentage {
  font-size: .8em;
  width: 100%;
  height: 40px;
  background: repeating-linear-gradient(
  to right,
  #ddd,
  #ddd 1px,
  #fff 1px,
  #fff 5%
);
  &:after {
    content: &quot&quot
    display: block;
    background-color: #3d9970;
    width: 50px;
    margin-bottom: 10px;
    height: 90%;
    position: relative;
    transition: background-color .3s ease;
    cursor: pointer;
  }
  &:hover,
  &:focus {
    &:after {
       background-color: #aaa; 
    }
  }
}
@for $i from 1 through 100 {
  .percentage-#{$i} {
    &:after {
      $value: ($i * 1%);
      width: $value;
    }
  }
}

توی پارت اول کد نمودارمون رو ساختیم و توی پارت دوم با یه حلقه کلاس های 1 تا 100 درصد رو درست کردیم خیلی سادس.

نمودار میله‌ای عمودی

توی این نمودار دیگه از پراپرتی خاصی استفاده نمیکنیم و فقط دانش پایه ی سی اس اس لازمه درضمن اندفعه به جای استفاده از سس از صفت(اتریبیوت) استایلِ html استفاده میکنیم، دلیلش رو جلوتر توضیح میدم، ابتدا html نمودار رو به شکل زیر بسازید:

<figure>
<ul class=&quotsparklist&quot>
      <li>
        <span class=&quotsparkline&quot>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 23%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 97%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 62%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 35%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 49%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 40%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 80%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 62%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 53%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 71%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 78%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 100%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 78%;&quot></span> </span>
          <span class=&quotindex&quot><span class=&quotcount&quot style=&quotheight: 56%;&quot></span> </span>
        </span>
      </li>
    </ul>
</figure>

خوب برای سی اس اسش کاری که میکنیم خیلی سادست اسپن هارو رلتیو() میکنیم کنار هم با فلوت میچینیمشون و یه ارتفاع و عرض بهشون میدیم تا اینجا یه سری مستطیل کنارهم داریم که عین هم هستند حالا میخوایم توشون رو پر کنیم، کاری که انجام میدیم اینه که یه سری باکس درست میکنیم و ابسلوتشون() میکنیم و به پایین چپ میچسبونیمشون(چرا؟تا از پایین به بالا پر بشن نه برعکس) و تمام ! فقط یه مشکلی ممکنه به ذهنتون برسه اون هم اندازه محدود نمودار هست که با تغییر سایز در آینده ممکنه خراب شه، برای درست کردن این مشکل یک پراپرتی ترنسفورم() گذاشته شده تا به راحتی بزرگ و کوچیکش کنید، کد CSS مون:

.sparklist {
  margin: 70px 0 0;
  padding: 0;
    li {
      list-style: none;
          .sparkline {
            transform: translate(200px) scale(6);
          }
          .index .count {
            background-color: #0074d9;
        }
    }
}
.sparkline { 
  display: inline-block;
  height: 1em;
  margin: 0 0.5em;
}
.sparkline .index { 
    position: relative;
  float: left; 
  width: 2px; 
  height: 1em; 
}
.sparkline .index .count { 
  display: block; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  height: 0; 
  background: #AAA;
  color: transparent;
}


جمع بندی:

تو این مقاله توضیح دادیم که چطور بتونیم انواع نمودار رو با سی اس اس خام بسازیم اما چندتا مشکل توی این نمودارها وجود داره که تو نگاه اول معلوم نمیشن:

احتمالا وقتی بخواید پی دی اف خروجی بگیرید یا پرینت کنید به دلیل استفاده از background ، نمودارهاتون دیده نمیشن که البته یه سری راه حل هم داره که نیاز باشه توضیح میدم خدمتتون.

پشتیبانی مرورگرها هم مخصوصا برای دو نمودار اول کمتر هست و ممکن هست در برخی از مرورگرها دیده نشن نمودارها.

مشکل مهم!:ما از سودو المنت های گاها استفاده کردیم در کدهامون که بصورت عادی تو جاوااسکریپ بهشون دسترسی نداریم پس داینامیک کردن نمودارها ممکنه سخت باشه!(به همین دلیل نمودار آخر رو اینلاین تعریف کردیم).

امیدوارم ازین مقاله که البته الهام گرفته شده از مقالات دیگه‌ای بودن راضی بوده باشید.

نمودارhtmlcssبرنامه‌نویسیچارت
شاید از این پست‌ها خوشتان بیاید