Pazartesi 20 Mart 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. JavaScript
  3. AnyChart ile JavaScript Grafikleri Oluşturun
 AnyChart ile JavaScript Grafikleri Oluşturun
JavaScript

AnyChart ile JavaScript Grafikleri Oluşturun

Yazar : Bilal UÇAR 10 Mayıs 2017 2 Comments

Web sitenizde verileri düzgün bir biçimde göstermek istiyorsanız grafik ile gösterimi tercih edebilirsiniz. AnyChart kütüphanesi ile verileri kolayca görselleştirebilirsiniz.

Bu yazıda AnyChart ile yapılmış 5 tane şık ve kolay örnekle göstereceğim. AnyChart’ın birden çok grafik tipi ve kullanımı vardır. Basit örneklerle mantığı anlatmaya çalışıp sizlerin de bu kütüphaneyi kolayca kullanabilmenizi sağlayacağım.

AnyChart ticari bir kütüphanedir, ancak kâr amacı gütmeyen herhangi bir amaç için ücretsizdir. Çok iyi kurulmuş ve 10 yılı aşkın süredir piyasada bulunuyor. Aslında Flash temelli olan AnyChart, sonrasında JavaScript’e taşınmıştır.

AnyChart API çok esnektir ve çizelgenin hemen hemen her yönünü anında, çalışma zamanında değiştirmenize izin verir.

AnyChart ile Hızlı Başlangıç

HTML sayfanızda AnyChart’ı kullanmaya başlamak çok basittir. Öncelikle Javascript kitaplığını dahil etmelisiniz. Daha sonra kullanacağınız AnyChart scriptini gerekli yere ekledikten sonra çalışacaktır. Aşağıda CodePen ile yapılmış örnek görüyorsunuz. HTML, JS, CSS kısımlarını görüntüleyebilirsiniz.

Kolay, değil mi? Verileri ayarlama konusunda AnyChart’ta işler daha da kolay ve daha esnek hale geldi. Buna daha yakından bakmak için bir sonraki bölüme geçelim.

Verilerinizi AnyChart’a Aktarmak

AnyChart’ı iyi kılan şeylerden biri, çok çeşitli formatlardaki verilerle çalışabilmesidir. AnyChart’ın esnek yaklaşımı onu hemen hemen her projeye uygun hale getirir.

Array of Arrays
Aslında, yukarıdaki AnyChart bölümüyle Hızlı Başlat’ın ilk yolunu zaten gördünüz. Bu yöntemi kullanarak, verilerinizi Array of Arrays olarak gösterirsiniz ve gerisini AnyChart yapar. Bu yöntem özlüdür, biçimlendirilmesi ve kullanımı kolaydır.

Grafik türünü değiştirmenin yöntem çağrısı anychart.column () ‘dan anychart.pie ()‘ ye değiştirilmesi kadar basit olduğuna dikkat edin. Bu makale boyunca çeşitli grafik türlerini göstereceğim, ancak burada tam bir genel bakış bulabilirsiniz: Desteklenen Grafik Türleri.

Array of Objects
İkinci yol, ilk örneğe oldukça benzemektedir. Burada veriler nesnelerin dizisi olarak ayarlanır. Aslında, daha kompakt ama yine de formatlamak, okumak ve anlamak çok kolay. Buna ek olarak, bu format, verilerinizdeki tek tek noktaları yapılandırmanızı sağlar; bu, diğer yollarla da ele alınabilir, ancak yalnızca ek eşlemeler ile gerçekleştirilebilir.

Not: benzer bir durumda nesnelerdeki verileri kullanırken, bağımsız değişken ve değer alanları için uygun adları kullanın. Bununla ilgili kapsamlı bilgileri, her grafik (seri) türü için AnyChart belgelerinde bulabilirsiniz. Çoğu durumda, bağımsız değişken x’dir ve değer genellikle value alanına yerleştirilir.

Birden Çok Seri Grafikler Oluşturma

Çoklu seriler, çoklu veri kümelerinin üst ve alt bölümlerini çizerken bunları karşılaştırmanıza olanak tanıyan çizelgelerdir. AnyChart ile çoklu seriler çizelgesi oluştururken, daha önce tanıtılan Array of Array ve Array of Object yöntemlerini kullanabilirsiniz, ancak serinizin adlarını da belirtebilirsiniz. AnyChart motoru her şeyle ilgilenir.

Multiple Series: Array of Arrays
Basit dizileri kullanmak isterseniz bunun nasıl yapılacağı aşağıda açıklanmıştır:

Multiple Series: Array of Objects
Şimdi, bir dizi nesne kullanarak çoklu seri grafiği nasıl oluşturabileceğinizi görebilirsiniz.

Not: Bunun gibi nesneleri kullanırken, değerler için alan adlarını uygulayabilirsiniz.

Nasıl yapılacağı aşağıda CodePen aracında gösterilmiştir:

Bu makalede web sitelerine grafik eklemenin bir yöntemi olan AnyChart JS kütüphanesini tanıtıp, örnekler gösterdik. Bu konu hakkındaki düşüncelerinizi yorum yazarak bizlerle paylaşabilirsiniz.

Etiketler: çizgi grafiği nasıl yapılır html grafik nasıl oluşturulur javascript grafik kütüphanesi javascript ile grafik oluşturmak sütun grafiği nasıl yapılır
Ö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.

2 Yorumlar

  • zülfü mehmet özçifçi says:
    2 Nisan 2019 at 09:34

    Teşekkürler. Döviz için yazdığım bir script için tam aradığım kütüphane.

    Reply
    • onur says:
      21 Ağustos 2019 at 20:10

      Ben kullanamadım acaba yardımcı olur musunuz? Ekrana hiç bişey gelmiyor

      Reply

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.