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



این نوع نمودار می تواند اطلاعات مفیدی را برای روندهای سال، تغییرات قیمت، مقایسه رفتارها و غیره ارائه دهد.
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 | |
2 | |
3 | 50
|
4 | 40
|
5 | 30
|
6 | 20
|
7 | 10
|
8 | 0
|
9 | |
10 | |
11 | |
12 | 2010
|
13 | |
14 | |
15 | 2013
|
16 | |
17 | |
18 | 2016
|
19 | |
20 | |
21 | 2019
|
22 | |
23 | |
24 | 2022
|
25 | |
26 | |
27 |
حال بیایید مقادیر این متغیرها را توضیح دهیم:
- این
start
مقادیر تعداد کارمندان در سال را توصیف می کند. بالاترین مقدار در محور y 50 است که به معنای 100٪ در حالت درصد است. بنابراین، برای نشان دادن 40 کارمند، از این محاسبه استفاده می کنیم: (40 / 50) * 100 => 80%. به طور مشابه، برای 30 کارمند، ما از این استفاده خواهیم کرد: (30 / 50) * 100 => 60٪ و غیره. - برای اتصال نقاط داده،
end
ارزش تمام موارد لیست به غیر از آخرین مورد باید با آن مطابقت داشته باشدstart
ارزش آیتم لیست خواهر و برادر بعدی آنها که گفت،end
مقدار اولین آیتم لیست با آن مطابقت داردstart
مقدار مورد دوم فهرست، theend
مقدار مورد دوم لیست با آن مطابقت دارد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 |
|
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