Ana SayfaWeb TasarımChart.js ile Veri Görselleştirme ve Grafik Tabloları

Chart.js ile Veri Görselleştirme ve Grafik Tabloları

YouTube'ta Takip Et →

Bazı verileri, gösterge tabloları veya çizelgeler olmadan anlamak çok yorucu olabiliyor. Bu tip görsel grafikler Karmaşık istatistikleri anında basite indirgeyip etkili bir şekilde anlaşılmalarını sağlıyor. ChartJS de bu verileri görselleştirmede kullanılan kütüphanelerden biri.

ChartJS; Line, Bar, Radar, Pie, Polar, Bubble, Scatter tarzlarında görsel grafikler hazırlamanıza olanak tanıyor. Telefon ve tablet gibi mobil cihazlarda çalışabilme özelliği ve tüm modern tarayıcılar tarafından desteklenmesi de kütüphanenin artı yanları. Üstelik tüm grafik göstergeleri animasyonlu ve özelleştirilebilir.

ChartJS ile ilgili bir çalışma yapabilmeniz için öncelikle sayfanıza JavaScript dosyasını çağırmanız gerekiyor.

 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.rotasenin.com/analytics.js','ga');ga('create','UA-24131974-1','auto');ga('require','GTM-TV9X8PZ');ga('send','pageview');</script> 

Ardından sayfaya canvas etiketi ile bir ID atamamız gerekiyor. Yazacağımız script grafiği bu alanda gösterecek. Canvas’a width ve height değerleri vererek belli bir genişliğe ve yüksekliğe sahip olmasını sağlayabilirsiniz.

<canvas id="chart"></canvas>

Sonrasında ise sıra chart.js’nin kodlarını yazmaya geldi. Videoda bu bilgilere nasıl ulaşabileceğinizi adım adım gösteriyorum. Chart.js’nin kendi web sitelerinde gerekli tüm kodlar, tüm özellikler açıklamalarıyla verilmiş. Oradaki örneklere bakarak istediğimiz şekilde görsel tablolar hazırlayabiliriz.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.