Boş sepet
Sepette ürün yok.
Dükkana Dön
![Saf CSS’de Çizgi Grafikleri Nasıl Yapılır](https://rekla.net/wp-content/uploads/2024/06/Saf-CSSde-Cizgi-Grafikleri-Nasil-Yapilir.jpg)
Geçmişte çok zaman, sana nasıl yaratılacağını göstermiştim farklı grafik türleri CSS ve JavaScript kullanarak. Bugün size saf CSS’de çizgi grafiklerin nasıl oluşturulacağı konusunda rehberlik edeceğim.
Çizgi Grafiği Nedir?
Çizgi grafiği bir kardiyograma benzer; bir hat üzerinden bağlanan veri noktalarından oluşur.
![Çeşitli aralıklarla ölçülen, Saint Petersburg'un Puşkin kasabasının 1800'den 2010'a kadar nüfusunu gösteren çizgi grafik](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108657/image-upload/Pushkin_population_history.jpg)
![Çeşitli aralıklarla ölçülen, Saint Petersburg'un Puşkin kasabasının 1800'den 2010'a kadar nüfusunu gösteren çizgi grafik](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108657/image-upload/Pushkin_population_history.jpg)
![Çeşitli aralıklarla ölçülen, Saint Petersburg'un Puşkin kasabasının 1800'den 2010'a kadar nüfusunu gösteren çizgi grafik](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108657/image-upload/Pushkin_population_history.jpg)
Bu tür bir grafik, yıl içindeki eğilimler, fiyat değişiklikleri, davranışları karşılaştırma vb. için yararlı bilgiler sağlayabilir.
1. Verilerle Başlayın
Bu demo için istediğimizi varsayacağız. Yıllara göre çalışan sayısını tanımlayan aşağıdaki verileri bir çizgi grafikte görselleştirmek için:
Yıl | Çalışan Sayısı | |
2010 | 40 | |
2013 | 30 | |
2016 | 25 | |
2019 | 35 | |
2022 | 40 |
2. Sayfa İşaretlemesini Belirleyin
İki liste içeren bir sarmalayıcı öğe belirleyeceğiz:
- İlk liste y ekseni aralığını ayarlar. Yukarıdaki tablo verilerine baktığınızda ikinci sütunun 40’a kadar değerler içerdiğini göreceksiniz. Bunu akılda tutarak 10’luk adım büyüklüğüyle 0’dan 50’ye kadar altı değer tanımlayacağız. -eksen bu nedenle 0, 10, 20, 30, 40 ve 50 olacaktır.
- İkinci liste x ekseni verilerini ayarlar. Bunlar tablomuzun ilk sütunundan en düşükten en yükseğe doğru çıkarılmıştır. Şunu da göz önünde bulundurun:
start
,end
Vedelay
Liste öğelerine aktardığımız CSS değişkenleri. Çizgiyi oluşturacak veri noktalarını oluşturmak için bunları kullanacağız.
İşte gerekli işaretleme:
1 | <div class="chart-wrapper"> |
2 | <ul class="chart-y"> |
3 | <li>50</li> |
4 | <li>40</li> |
5 | <li>30</li> |
6 | <li>20</li> |
7 | <li>10</li> |
8 | <li>0</li> |
9 | </ul>
|
10 | <ul class="chart-x"> |
11 | <li style="--start:80%; --end:60%"> |
12 | <span>2010</span> |
13 | </li>
|
14 | <li style="--start:60%; --end:50%; --delay: 1"> |
15 | <span>2013</span> |
16 | </li>
|
17 | <li style="--start:50%; --end:70%; --delay: 2"> |
18 | <span>2016</span> |
19 | </li>
|
20 | <li style="--start:70%; --end:80%; --delay: 3"> |
21 | <span>2019</span> |
22 | </li>
|
23 | <li style="--start:80%; --end:80%; --delay: 4"> |
24 | <span>2022</span> |
25 | </li>
|
26 | </ul>
|
27 | </div>
|
Şimdi bu değişkenlerin değerlerini açıklayalım:
-
start
değerler yıllık çalışan sayısını tanımlayacaktır. Y eksenindeki en yüksek değer 50’dir, bu da yüzde modunda %100 anlamına gelir. Yani 40 çalışanı temsil etmek için şu hesaplamayı kullanacağız: (40 / 50) * 100 =>%80. Benzer şekilde, 30 çalışan için şunu kullanacağız: (30 / 50) * 100 =>%60, vb. - Veri noktalarını bağlamak için
end
Son liste dışındaki tüm liste öğelerinin değeri,start
sonraki kardeş listesi öğesinin değeri. Bununla birlikte,end
ilk liste öğesinin değeri aşağıdakiyle eşleşecektir:start
ikinci liste öğesinin değeri,end
ikinci liste öğesinin değeri aşağıdakiyle eşleşecektir:start
üçüncü liste öğesinin değeri vb. -
delay
değerler grafik animasyon sırasını ayarlayacaktır. Değer ne kadar yüksek olursa ilgili animasyonun çalışması için gereken süre de o kadar artar.
3. Grafiği Stillendirin
Basitlik açısından, bunu atlayacağız sıfırlama/temel stiller. tıklayarak bunları kontrol edebilirsiniz. CSS demo projesinin sekmesi.
Grafik sarmalayıcı, eksenler arasında 20 piksel boşluk bulunan esnek bir kap olacaktır. Y ekseni genişliği otomatik olacak, x ekseni ise kalan alanı kaplayacak şekilde genişleyecektir.
![Grafik eksenleri](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108657/image-upload/chart.jpg)
![Grafik eksenleri](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108657/image-upload/chart.jpg)
![Grafik eksenleri](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108657/image-upload/chart.jpg)
X ekseni ve öğeleri de esnek kaplar olacaktır. Öğeler ana eksen boyunca eşit olarak dağıtılacak ve içerikleri altta yer alacaktır.
İlgili stiller şunlardır:
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 | }
|
Daha sonra, şunu tanımlayacağız: ::before
Ve ::after
liste öğelerinin sözde öğeleri.
::before
sözde elemanlar çizgileri oluştururken, ::after
İsteğe bağlı olacak sözde öğeler veri noktalarını oluşturacaktır.
![CSS sözde öğelerini kullanan grafik stili](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108657/image-upload/single_line_chart.jpg)
![CSS sözde öğelerini kullanan grafik stili](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108657/image-upload/single_line_chart.jpg)
![CSS sözde öğelerini kullanan grafik stili](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108657/image-upload/single_line_chart.jpg)
Çizgi Animasyonu
Geçmişte birçok derste yaptığımız gibi çizgi animasyonu oluşturmak için şu avantajlardan yararlanacağız: clip-path
mülkiyet ve özellikle onun polygon()
CSS işlevi.
Bir hatırlatma olarak, bir öğe clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
bütünüyle görünmesini sağlar.
Bizim durumumuzda, ilk liste öğesinin satır animasyonuna odaklanalım. start
değeri %80 ve end
değeri %40.
1 | <!--FIRST LIST ITEM-->
|
2 | <li style="--start:80%; --end:60%"> |
3 | <span>2010</span> |
4 | </li>
|
BENöncelikle onu ayarlayacağız clip-path
mülkiyet polygon(0 20%, 0 20%, 0 20%, 0 20%)
bu da tüm noktaların aynı pozisyonda durmasını sağlayacaktır.
![İlk liste öğesi için ilk klip yolu özelliği](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108657/image-upload/clippy_initial.jpg)
![İlk liste öğesi için ilk klip yolu özelliği](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108657/image-upload/clippy_initial.jpg)
![İlk liste öğesi için ilk klip yolu özelliği](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108657/image-upload/clippy_initial.jpg)
Sayfa yüklendiğinde güncelleyeceğiz clip-path
değer polygon(0 20%, 100% 40%, 100% calc(40% + 2px), 0 calc(20% + 2px))
. Bu şekilde son üç noktanın konumu değişir ve bir çizgi oluşturulur kalınlığını kontrol edebiliyoruz.
Clippy aracında CSS ekleyemeyeceğimizi lütfen unutmayın. Bu yüzden stillerde görünen calc(40% + 2px) ve calc(20% + 2px) yerine %41 ve %21’i denedim.
Tüm bunları göz önünde bulundurarak artık grafiğin veri noktalarından bağımsız olarak dinamik stiller oluşturabiliyoruz.
İlgili stiller şunlardır:
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 | }
|
Son olarak, grafik animasyonunun sayfa yüklendiğinde çalışmasını sağlamak için JavaScript’i kullanacağımızı belirtmekte fayda var. loaded
sınıfa body
eleman.
1 | window.addEventListener("load", function() { |
2 | document.body.classList.add("loaded"); |
3 | })
|
Her bir öğe için elde edilen klip yolu değerini test etmek amacıyla tarayıcı araçlarınızı kullanmayı unutmayın.
![](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108657/image-upload/clip_browser.png)
![](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108657/image-upload/clip_browser.png)
![](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108657/image-upload/clip_browser.png)
Çok Hatlı Grafikler
Tek satırlı grafiğimiz mevcut olduğunda, daha da ileri gidebilir ve biraz daha fazla işaretlemeyle yalnızca CSS’ye özgü çok satırlı grafikler oluşturabiliriz.
Tek çizgi grafiğinde tartıştığımız ilkelerin aynısını izleyen aşağıdaki demoyu düşünün:
Çözüm
Arkadaşlar, yeni bir CSS grafiği eğitimini daha tamamladık! Umarım geliştirdiğimiz demoları beğenmişsinizdir ve bir veya iki yeni şey öğrenmişsinizdir.
Elbette, JavaScript grafik kitaplığını kullanarak her zaman daha gelişmiş bir şeyler oluşturabilirsiniz. Ancak öte yandan, modern CSS tekniklerini deneyerek zor yoldan gitmek her zaman eğlencelidir.
Her zamanki gibi okuduğunuz için teşekkürler!