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.

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:

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, endVe delay 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.

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.

Ç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.

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.

Ç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!