AnyChart Ile JavaScript Grafikleri Oluşturun | Webmaster.Kitchen

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.