Ana içeriğe geç

Grafik Örnekleri (Chart.js)

Bu sayfa, Phantom Documentation Kit içinde Chart.js kullanımını göstermektedir. Bu sayfayı inceleyerek grafik uygulamalarını ve canlı kod örneklerini görebilirsiniz.

Gerekli Yapılandırma

Markdown dosyalarınızda Chart.js kullanmak için, belgenizin başına aşağıdaki YAML ön maddesini mutlaka eklemelisiniz: 

---
extra_javascript:
  - assets/javascripts/chart.js
---
Bu yapılandırma olmadan grafikler düzgün render edilmez.

Çizgi Grafiği

Aylık veri eğilimlerini gösteren basit tepkisel (responsive) çizgi grafiği.

Bar Grafiği

Kategori karşılaştırmalarını gösteren tepkisel (responsive) bar grafiği.

Çoklu Eksen (Çizgi ve Bar) Grafiği

Farklı metrikleri gösteren çoklu y-eksenli kombinasyon grafiği.

Pasta Grafiği

Veri dağılımını gösteren tepkisel (responsive) pasta grafiği.

Halka Grafiği

Toplam değeri merkez metniyle gösteren tepkisel (responsive) halka grafiği.

Chart.js Uygulaması

Phantom Documentation Kit içindeki Chart.js uygulaması overrides/assets/javascripts/chart.js dosyası aracılığıyla sağlanır. Bu uygulama aşağıdaki özellikleri sunar:

Nasıl Çalışır

  1. Otomatik Başlatma: Sayfa yüklendiğinde, tüm .chart-container öğeleri otomatik olarak taranır ve grafikler oluşturulur.

  2. JSON Tabanlı Yapılandırma: Grafikler JSON formatında data-chart-config özniteliği aracılığıyla yapılandırılır. Bu yaklaşım:

    • JavaScript kodu yazmadan grafik oluşturmayı sağlar
    • Markdown dosyaları içinde temiz ve okunabilir yapı sunar
    • Güvenli yapılandırma yöntemi sağlar

  3. Tema Desteği: Uygulama Material for MkDocs tema değişikliklerini otomatik olarak algılar:

    • Açık/koyu tema geçişleri sırasında grafikler otomatik olarak güncellenir
    • Metin renkleri, grid çizgileri ve arka planlar tema uyumlu hale gelir
    • Tema değişiklikleri MutationObserver API kullanılarak izlenir

  4. Tepkisel (responsive) Tasarım: Tüm grafikler için varsayılan ayarlar:

    • responsive: true - Kapsayıcı boyutuna göre otomatik ölçekleme
    • maintainAspectRatio: false - Esnek en-boy oranı
    • aspectRatio: 2 - Varsayılan 2:1 en-boy oranı

Kullanılan Teknolojiler

  • Chart.js v4.4.7: Vendor builder aracılığıyla optimize edilmiş sürüm
  • Lazy Loading: Chart.js yalnızca grafik içeren sayfalarda yüklenir
  • Tema Gözlemcisi: Gerçek zamanlı tema değişikliği izleme
  • JSON Parse: Güvenli yapılandırma okuma

Grafik Oluşturma Süreci

1. HTML öğesi tarama → .chart-container
2. JSON config okuma → data-chart-config özniteliği
3. Tema renklerini uygula → applyThemeToConfig()
4. Canvas oluşturma → Chart.js render
5. Tema değişikliği dinleyicisi → updateCharts()

Faydalı Bağlantılar

Uygulamamızla ilgili Chart.js belgeleri: