Cuma 27 Ocak 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. Plottable.js ile D3’te Hızlı Dinamik Grafikler Oluşturun
 Plottable.js ile D3’te Hızlı Dinamik Grafikler Oluşturun
Arayüz JavaScript

Plottable.js ile D3’te Hızlı Dinamik Grafikler Oluşturun

Yazar : Bilal UÇAR 14 Haziran 2017 0 Comment

Ücretsiz D3.js kütüphanesi, sayfada etkileşimli grafikler oluşturmanıza olanak tanır. D3 kütüphanesi bu alanda en popüler kütüphanelerden biridir. Ancak öğrenilmesi o kadar da kolay değil.

Bu yüzden Plottable.js çok değerli bir kütüphanedir. D3.js’nin üzerine inşa edilmiş, ücretsiz bir açık kaynak projesi olup, herkesin etkileşimli veri grafikleri sıfırdan oluşturmasını kolaylaştırır.

Bu kütüphane tüm sıkıntılı işleri halleder, bu nedenle veriler gibi ayrıntılara odaklanabilirsiniz. Plottable, seçtiğiniz herhangi bir grafiğin boyutu ve konumu için uygun kodu üretir.

Her grafiğin kendi Plottable Bileşeni vardır; burada grafiği kendi başınıza yeniden inşa etmek için şablon kodunu kopyalayıp yapıştırabilirsiniz. Şu anda, çubuk grafikler, pasta grafikleri, dağılım grafikleri ve alan grafikleri dahil olmak üzere 10 grafik stilinden birini seçebilirsiniz.

Bileşenleri tek tek yeniden inşa edebilir ve ayarlarını dinamik olarak kişiselleştirebilirsiniz. Bu şekilde etkileşimli unsurları, renkleri, animasyonları, pozisyonlamaları, boyutları ve ihtiyacınız olan her şeyi kolayca değiştirebilirsiniz.

Kaynak kataloğuna göz atmak ve bir kopyasını indirmek istiyorsanız, tam kütüphane GitHub‘da mevcuttur.

Ancak, öğrenmenin en iyi yolu örnektir. Bu nedenle, Plottable çalıştıran örnek grafiklerden bir tanesine bakarak nasıl çalıştığını ayrıntılı bir şekilde inceleyin.


Her grafik tamamen etkileşimli, önyükleme yapmak için kaynak kodu var. Benzer bir grafiği yeniden oluşturmak isterseniz JS kodunu kopyalayıp yapıştırın ve gerektiğinde yeniden biçimlendirin.

Sitelerinden iki tane favorim var. Bunlardan ilki Github’un etkinlik takviminin göründüğü kısım ve ikincisi de dinamik seçimler için senkronize grafikler.


Daha önce hiç D3.js kullanmadıysanız, bu kütüphaneyi öğrenmek için biraz çaba harcamanız gerekir. Özellikle, TypeScript ile yazıldığı için, muhtemelen bunu da almak isteyeceksiniz. Final kod ES5 JavaScript ile derlendiğinden tüm popüler tarayıcılarda çalıştığını da belirtelim.

Bu kütüphaneyi öğrenmek için istekliyseniz, kaliteli kaynakların bulunduğu Tutorials sayfasına göz atmanızı tavsiye ederim. Plottable ile çalışmaya başlamak ve sıfırdan dinamik web tabanlı grafikler oluşturmak için ihtiyacınız olan her şeyi öğrenirsiniz.

Bu makalede dinamik web tabanlı grafik oluşturmanızı sağlayan Plottable kütüphanesini tanıttık. Bu konu hakkındaki düşüncelerinizi yorum yaparak bizlerle paylaşabilir, Mutfağa Katkıda Bulunabilirsiniz.

Etiketler: javascript grafik kütüphaneleri javascript ile grafik oluşturma js ile grafik oluşturma plottable js nedir
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.