Morris.js Donut Grafiğinin kullanımı
Javascript tarafında önceden " jqplot.js " kütüphanesini kullanıyordum. Sitelerde gezerken "morris.js" kütüphanesine rastladım. Görsel yönü daha kuvvetli olan bu kütüphane yardımıyla daha güçlü grafikler oluşturabilirsiniz.
Bu yazımda javascript tarafında grafik çizdirmek için faydalı bir kütüphane olan " morris.js " yardımıyla örnek donut grafiği çizimini ele alacağım.
Öncelikle grafiği çizmek için html tarafında düzenlemeler yapıyoruz.
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"> </script> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script> <meta charset=utf-8 /> <title>Morris.js Donut Chart Örneği</title> <body> <div id="ornek-donut"></div> </body>
İlgili kütüphaneleri ekledikten sonra grafiğin görünmesini istediğimiz div elemanına grafik elemanına uygun bir isim veriyoruz. Burada "ornek-donut" adını verdim. Sonrasında script tarafına geçerek grafiğin asıl çizilmesini sağlayan kısmı oluşturuyoruz.
Morris.Donut({
element: 'ornek-donut',
data: [
{label: "Türkiye", value: 12},
{label: "Çek Cumhuriyeti", value: 30},
{label: "Almanya", value: 20}
],
labelColor: '#000000',
colors: [
'#429A3C',
'#0068A6',
'#E81922'
],
formatter: function (x) { return x + "%" }
});
Bu kısımda element grafiği nereye çizeceğini, data grafikte gösterilmesi istenen elemanları, labelColor grafiğin içinde gözüken etiketleri colors ise grafik renklerini ifade ediyor. Herhangi bir format vermek isterseniz formatter grafiğin etiketine göndereceğiniz formatı düzenliyor.
Örnek grafik sayfası için:
İlgili kütüphane için:
Yorumlar
Yorum Gönder