Bundan önceki yazımda Mikenk in ne olduğundan bahsetmiştim. Bu yazımın temel konusu ise mihenk.js i kendi projemize nasıl dahil ederiz ve grafikleri nasıl kullanabiliriz olacak. Öncelikle geliştirmekte olduğum açık kaynak mihenk.js projesine aşağıdaki linkten erişebilirsiniz;
guvenir.github.io/Mihenk/
Kodları indirmek için ;
https://github.com/Guvenir/mihenkjs
Javascript ve css kodlarımızı indirdikten sonra html sayfamıza önce d3.js linkini sonra da mihenk.css ve mihenk.js yi ekleyelim. Aşağıdaki gibi ;
Grafiğin png çıktısını alabilmek için saveSvgAsPng yi de indirip koda eklememiz gerekiyor. Sonrasında da html içerisine grafiğin çizdirileceği div i tanımlıyoruz. Bu div içerisini de boş bir svg tag ı açıp kapatıyoruz.
Html tarafı hazır olduğuna göre artık Javascript tarafında verimizi uygun formatta hazırlayıp grafiğimizi çizdirebiliriz.
Veri formatını inceleyecek olursak xdata x ekseni için gerekli değerler , ydata y ekseni için gerekli verilerdir. Opt ise grafikle ilgili değişiklik yapabileceğimiz yerdir. x_labels ve y_label ilgili eksenler için farklı şekilde label eklemek istiyrosak (örneğin x ekseninde grafik oluşturulurken sayısal veri girildi ancak ben orada tarih yazmasını istiyorsam x_labels dizisi içerisine tek tek x verisine karşılık gelecek tarih bilgilerini ekleyebilirim) bu diziler sayesinde kolayca ekleyebiliriz.
Oluşturulan grafiklere hem çift tıklayarak hem de farenin tekerini çevirerek yakınlaşabilir , sürükleyerek grafiğin konumunu değiştirebiliriz. Bunu yapabilmemiz için ise opt içerisindeki zoom özelliği true olmalı ve x_label , y_labels içerisinde etiket olmamalıdır. Bunun sebebi ise x ve y eksenleri için sayısal veri girildiğinde grafiğe yakınlaştığımızda değerleri kendisi hesaplayabilir ancak etiket koyarsak yakınlaşma durumunda yeni etiket bilgilerini kendisi ekleyemeyeceği için grafik bozuluyor. Bundan dolayı zoom özelliği true olsa bile x veya y ekseni için ya da her ikisi için etiket belirlenmişse zoom özelliği devre dışı kalıyor.
xlab ve ylab ise grafik eksenlerinin adlandırılması için kullanılmaktadır. Örneğin hız/zaman grafiği için ylab hız , xlab zaman şeklinde düzenleyebiliriz.
color bir dizidir ve içerisine eklediğimiz renkleri sırası ile grafikte kullanır. "#456" şeklinde renk kodlarımızı ekleyebiliriz. Örneğin ["#987","#123456"] renklerini eklediğimiz zaman grafikte diyelim ki 6 adet bar var ise sırası ile renklendirir ve 3 adet ilk renk için 3 adette ikinci renk için bar olur. Bir nevi gruplandırma yapmış oluruz.
div_id içerisine ise html tarafında oluşturduğumuz ve grafiğin çizileceği div in id sini yazıyoruz. Doğru yazmadığımız zaman grafik çizilmeyecektir.
mihenk.barchart(mihenkdata);
Veriyi uygun formatta hazırladıktan sonra yukarıdaki gibi çağırmamız yeterli olacaktır.
Şimdilik bu kadar , eğer bir sorunuz olursa bana ulaşabilir veya yorum bırakabilirsiniz.
0 yorum:
Yorum Gönder