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

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

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

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

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

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

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

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 شبه عناصر، که اختیاری خواهند بود، نقاط داده را ایجاد می کنند.

انیمیشن خط

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

فقط به عنوان یک یادآوری، یک عنصر با 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 همیشه سرگرم کننده است.

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