نحوه ایجاد نمودارهای خطی در CSS خالص
انتشار: اردیبهشت 10، 1403
بروزرسانی: 08 اردیبهشت 1404

نحوه ایجاد نمودارهای خطی در CSS خالص


در گذشته زمان زیادی به شما نشان دادم که چگونه انواع مختلف نمودارها را ایجاد کنید با استفاده از CSS و جاوا اسکریپت امروز، من شما را در مورد نحوه ساخت نمودارهای خطی در CSS خالص راهنمایی می کنم.

نمودار خطی چیست؟

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

نمودار خطی نشان دهنده جمعیت شهر پوشکین در سن پترزبورگ از سال 1800 تا 2010 است که در فواصل زمانی مختلف اندازه گیری شده است.نمودار خطی نشان دهنده جمعیت شهر پوشکین در سن پترزبورگ از سال 1800 تا 2010 است که در فواصل زمانی مختلف اندازه گیری شده است.نمودار خطی نشان دهنده جمعیت شهر پوشکین در سن پترزبورگ از سال 1800 تا 2010 است که در فواصل زمانی مختلف اندازه گیری شده است.
نمودار خطی نشان دهنده جمعیت شهر پوشکین، سنت پترزبورگ از سال 1800 تا 2010، اندازه گیری شده در فواصل زمانی مختلف - برگرفته از ویکی پدیا

این نوع نمودار می تواند اطلاعات مفیدی را برای روندهای سال، تغییرات قیمت، مقایسه رفتارها و غیره ارائه دهد.

1. با داده ها شروع کنید

برای این نسخه ی نمایشی، فرض می کنیم که می خواهیم برای تجسم در نمودار خطی داده های زیر که تعداد کارمندان را در طول سال ها توصیف می کند:

سال تعداد کارکنان
2010 40
2013 30
2016 25
2019 35
2022 40

2. علامت گذاری صفحه را مشخص کنید

ما یک عنصر wrapper را مشخص می کنیم که شامل دو لیست است:

  • لیست اول محدوده محور y را تنظیم می کند. اگر به داده های جدول بالا نگاه کنید، خواهید دید که ستون دوم شامل مقادیر تا 40 است. با در نظر گرفتن این موضوع، شش مقدار از 0 تا 50 را با اندازه گام 10 تعریف می کنیم. مقادیر y بنابراین محور 0، 10، 20، 30، 40 و 50 خواهد بود.
  • لیست دوم داده های محور x را تنظیم می کند. اینها از ستون اول جدول ما، از پایین ترین به بالاترین استخراج می شوند. را نیز در نظر بگیرید start، end، و delay متغیرهای CSS که به آیتم های لیست ارسال می کنیم. ما از آنها برای ایجاد نقاط داده ای که خط را می سازند استفاده می کنیم.

در اینجا نشانه گذاری مورد نیاز است:

1
  

class="chart-wrapper">

2
    
3
      
  • 50
  • 4
          
  • 40
  • 5
          
  • 30
  • 6
          
  • 20
  • 7
          
  • 10
  • 8
          
  • 0
  • 9
        
    10
        
    11
          
  • style="--start:80%; --end:60%">
  • 12
            2010
    13
          
    14
          
  • style="--start:60%; --end:50%; --delay: 1">
  • 15
            2013
    16
          
    17
          
  • style="--start:50%; --end:70%; --delay: 2">
  • 18
            2016
    19
          
    20
          
  • style="--start:70%; --end:80%; --delay: 3">
  • 21
            2019
    22
          
    23
          
  • style="--start:80%; --end:80%; --delay: 4">
  • 24
            2022
    25
          
    26
        
    27
      

    حال بیایید مقادیر این متغیرها را توضیح دهیم:

    • این start مقادیر تعداد کارمندان در سال را توصیف می کند. بالاترین مقدار در محور y 50 است که به معنای 100٪ در حالت درصد است. بنابراین، برای نشان دادن 40 کارمند، از این محاسبه استفاده می کنیم: (40 / 50) * 100 => 80%. به طور مشابه، برای 30 کارمند، ما از این استفاده خواهیم کرد: (30 / 50) * 100 => 60٪ و غیره.
    • برای اتصال نقاط داده، end ارزش تمام موارد لیست به غیر از آخرین مورد باید با آن مطابقت داشته باشد start ارزش آیتم لیست خواهر و برادر بعدی آنها که گفت، end مقدار اولین آیتم لیست با آن مطابقت دارد start مقدار مورد دوم فهرست، the end مقدار مورد دوم لیست با آن مطابقت دارد start ارزش مورد سوم لیست و غیره
    • این delay مقادیر دنباله انیمیشن نمودار را تنظیم می کند. هرچه این مقدار بیشتر باشد، انیمیشن مربوطه به زمان بیشتری برای اجرا نیاز دارد.

    3. نمودار را سبک کنید

    برای سادگی، ما از آن صرف نظر می کنیم بازنشانی/سبک های پایه شما می توانید آنها را با کلیک کردن بررسی کنید CSS برگه پروژه آزمایشی

    بسته بندی نمودار یک ظرف انعطاف پذیر با فاصله 20 پیکسلی بین محورها خواهد بود. عرض محور y خودکار خواهد بود در حالی که محور x گسترش می یابد تا فضای باقیمانده را پوشش دهد.

    محورهای نمودارمحورهای نمودارمحورهای نمودار

    محور x و اقلام آن نیز ظروف انعطاف پذیر خواهند بود. اقلام به طور مساوی در سراسر محور اصلی توزیع می شوند و محتوای آنها در پایین قرار می گیرد.

    در اینجا سبک های مربوطه آمده است:

    1
    .chart-wrapper {
    2
      display: flex;
    3
      gap: 20px;
    4
    }
    5
    
    6
    .chart-wrapper .chart-x {
    7
      display: flex;
    8
      flex-grow: 1;
    9
    }
    10
    
    11
    .chart-wrapper .chart-x li {
    12
      display: flex;
    13
      align-items: flex-end;
    14
      flex: 1;
    15
    }

    در مرحله بعد، ما را تعریف می کنیم ::before و ::after شبه عناصر اقلام لیست

    این ::before شبه عناصر خطوط را می سازند، در حالی که ::after شبه عناصر، که اختیاری خواهند بود، نقاط داده را ایجاد می کنند.

    طراحی نمودار با استفاده از شبه عناصر CSSطراحی نمودار با استفاده از شبه عناصر CSSطراحی نمودار با استفاده از شبه عناصر CSS

    انیمیشن خط

    برای ایجاد انیمیشن خط، همانطور که در بسیاری از آموزش های گذشته انجام داده ایم، از مزایای clip-path اموال و به طور خاص آن polygon() تابع CSS.

    قبل از حرکت بیشتر، شایان ذکر است که ساده ترین راه برای درک فرآیندی که می خواهیم دنبال کنیم، استفاده از یک سازنده مسیر کلیپ CSS مانند Clippy است.

    فقط به عنوان یک یادآوری، یک عنصر با clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) آن را به طور کامل نشان می دهد.

    در مورد ما، بیایید روی انیمیشن خط برای اولین مورد لیست که دارای یک است تمرکز کنیم start ارزش 80 درصد و یک end ارزش 40 درصد

    1
    
    2
  • style="--start:80%; --end:60%">
  • 3
      2010
    4

    مندر ابتدا، ما آن را تنظیم می کنیم clip-path دارایی به polygon(0 20%, 0 20%, 0 20%, 0 20%) که باعث می شود همه نقاط در یک موقعیت قرار گیرند.

    ویژگی مسیر کلیپ اولیه برای اولین مورد لیستویژگی مسیر کلیپ اولیه برای اولین مورد لیستویژگی مسیر کلیپ اولیه برای اولین مورد لیست

    وقتی صفحه بارگیری شد، آن را به روز می کنیم clip-path ارزش به polygon(0 20%, 100% 40%, 100% calc(40% + 2px), 0 calc(20% + 2px)). به این ترتیب موقعیت سه نقطه آخر تغییر می کند و یک خط ایجاد می شود ضخامت آن را می توانیم کنترل کنیم.

    پایان ویژگی مسیر کلیپ برای اولین مورد لیست پس از بارگیری صفحهپایان ویژگی مسیر کلیپ برای اولین مورد لیست پس از بارگیری صفحهپایان ویژگی مسیر کلیپ برای اولین مورد لیست پس از بارگیری صفحه

    لطفاً توجه داشته باشید که در ابزار Clippy، ما نمی توانیم CSS را اضافه کنیم. به همین دلیل به جای calc(40% + 2px) و calc(20% + 2px) که در استایل ها ظاهر می شوند، 41% و 21% را امتحان کردم.

    با در نظر گرفتن همه اینها، اکنون می توانیم سبک های پویا را بدون توجه به نقاط داده نمودار بسازیم.

    در اینجا سبک های مرتبط آورده شده است:

    1
    /*CUSTOM VARIABLES HERE*/
    2
    
    3
    .chart-wrapper .chart-x li {
    4
      position: relative;
    5
    }
    6
    
    7
    .chart-wrapper .chart-x li::before,
    8
    .chart-wrapper .chart-x li::after {
    9
      content: "";
    10
      position: absolute;
    11
      left: 0;
    12
      background: var(--chart-color);
    13
    }
    14
    
    15
    .chart-wrapper .chart-x li::before {
    16
      top: 0;
    17
      width: 100%;
    18
      height: 100%;
    19
      clip-path: polygon(
    20
        0 calc(100% - var(--start)),
    21
        0 calc(100% - var(--start)),
    22
        0 calc(100% - var(--start)),
    23
        0 calc(100% - var(--start))
    24
      );
    25
      transition: clip-path 0.5s calc(var(--delay, 0) * 0.5s);
    26
    }
    27
    
    28
    .chart-wrapper .chart-x li::after {
    29
      top: calc(100% - var(--start));
    30
      width: 10px;
    31
      height: 10px;
    32
      border-radius: 50%;
    33
      transform: translateY(-50%);
    34
    }
    35
    
    36
    .loaded .chart-wrapper .chart-x li::before {
    37
      clip-path: polygon(
    38
        0 calc(100% - var(--start)),
    39
        100% calc(100% - var(--end)),
    40
        100% calc(calc(100% - var(--end)) + var(--chart-thickness)),
    41
        0 calc(calc(100% - var(--start)) + var(--chart-thickness))
    42
      );
    43
    }

    در آخر، شایان ذکر است که برای اطمینان از اجرا شدن انیمیشن نمودار در بارگذاری صفحه، از جاوا اسکریپت برای اضافه کردن loaded کلاس به body عنصر

    1
    window.addEventListener("load", function() {
    2
      document.body.classList.add("loaded");
    3
    })

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

    نمودارهای چند خطی

    با وجود نمودار تک خطی خود، می توانیم حتی فراتر رفته و نمودارهای چند خطی فقط CSS را با یک نشانه گذاری بیشتر ایجاد کنیم.

    نسخه ی نمایشی زیر را در نظر بگیرید که از همان اصولی پیروی می کند که در نمودار تک خطی بحث کردیم:

    نتیجه

    ما به تازگی یک آموزش نمودار CSS را تکمیل کردیم، دوستان! امیدوارم از دموهایی که ما ساخته ایم لذت برده باشید و یکی دو چیز جدید یاد گرفته باشید.

    البته، همیشه می توانید با استفاده از یک کتابخانه نموداری جاوا اسکریپت چیزهای پیشرفته تری ایجاد کنید. اما، از سوی دیگر، رفتن به راه سخت با آزمایش تکنیک های مدرن CSS همیشه سرگرم کننده است.

    مثل همیشه، با تشکر برای خواندن!


    منبع: https://webdesign.tutsplus.com/how-to-make-line-charts-in-pure-css--cms-108657t