Bu makalede, Chartjs kullanarak veri setleri arasında kolayca karşılaştırma yapmak için grafik oluşturmanın nasıl yapılabileceği anlatılmaktadır Chartjs, JavaScript tabanlı bir açık kaynaklı kütüphane olarak web sayfalarında kullanılarak, dinamik ve etkileşimli grafikler oluşturmayı sağlar Kurulum için CDN kullanmak tavsiye edilmekte ve canvas elementi ile birlikte Grafik oluşturma adımları anlatılmaktadır Bu örnekte, ürün satış verileri kullanılarak bir bar grafik oluşturulmaktadır Bu sayede, verilerimizi daha anlaşılır ve çekici bir şekilde sunabiliriz

Chart.js, dinamik ve etkileşimli grafikler oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Bu makalede, Chart.js kullanarak veri setleri arasında kolayca karşılaştırma yapmak için grafikler nasıl oluşturulabileceği anlatılacak.

Grafikler, verileri anlaşılabilir ve görsel bir şekilde sunar. Chart.js kütüphanesi ile farklı çizgi, bar, pasta, polar area grafikleri oluşturabilirsiniz. Bu makalede, ürün satış verilerini kullanarak, bar grafik oluşturma örneği verilecek.

Bu makalede, CDN üzerinden Chart.js kütüphanesini kullanacak, proje yapısını hazırlayıp, canvas elementi oluşturacağız. Daha sonra, veri setleri oluşturup, bu verileri kullanarak bar grafikler oluşturacağız. Adım adım yapacağımız örnekler ile Chart.js kullanımını öğrenerek, veri setleri arasında kolayca karşılaştırma yapmak için grafikler oluşturabilirsiniz.

Chart.js Nedir?

Chart.js, JavaScript tabanlı bir açık kaynaklı kütüphanedir. Web sayfalarında kullanılarak, dinamik ve etkileşimli grafikler oluşturmak için kullanılır. Chart.js, bar, çizgi, pasta ve polar alan gibi çeşitli grafik türleri oluşturabilir. Kullanması kolay ve anlaşılır bir arayüze sahip olduğundan, verilerinizin görsel olarak çekici bir şekilde sunulmasını sağlar.

Chart.js Kurulumu

Chart.js kullanmak için öncelikle kütüphaneyi projemize eklememiz gerekiyor. Bunun için iki farklı yöntemden birini kullanabiliriz. İlk yöntem, Chart.js kütüphanesini indirip projemize dahil etmek. Ancak bu yöntem, gereksiz zaman ve hafıza kullanımına neden olabilir. İkinci yöntem ise CDN üzerinden Chart.js kütüphanesini kullanmak. Bu yöntem sayesinde kütüphaneyi her seferinde tekrar indirmek zorunda kalmadan hafızada tutabilir ve kullanabiliriz.

Bu makalede de ikinci yöntemi kullanarak CDN üzerinden Chart.js kütüphanesini kullanacağız. Kütüphaneyi projemize eklemek için aşağıdaki kodu HTML sayfamıza ekleyebiliriz:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

CDN kullanarak Chart.js Kütüphanesi Eklemek

CDN kullanarak Chart.js kütüphanesi, herhangi bir yüksek düzey programlama bilgisi gerektirmeden web sayfalarına eklememizi sağlar. Bu, herhangi bir kurulum yapmamız gerekmeden doğrudan işe başlayabileceğimiz anlamına gelir. İlk adım olarak, CDN'den Chart.js kütüphanesi linkini projemize eklememiz gerekir. Bu işlem için <script> etiketi kullanılır.

Yukarıdaki kodu HTML sayfamıza eklediğimizde, Chart.js kütüphanesi projemize yüklenir ve kullanmaya hazır hale gelir. Artık, grafik oluşturmak için kodlama yapabiliriz.

Chart.js kütüphanesi HTML sayfamıza eklemek için CDN kullanabiliriz. Bunun için sayfamızın head kısmında yukarıdaki kodu eklememiz yeterlidir. Bu sayede Chart.js kütüphanesi projemize eklenecektir.

CDN, web sayfalarında kütüphaneleri kullanmak için sıklıkla tercih edilen bir yöntemdir. CDN kullanarak Chart.js kütüphanesi sayfamızda kullanıma hazır hale getirdikten sonra, grafiklerimizi oluşturabilir ve veri setleri arasında kolayca karşılaştırma yapabiliriz.

Chart.js kullanmak için öncelikle kütüphaneyi projemize eklememiz gerekiyor. Bunun için CDN kullanarak Chart.js kütüphanesini kolayca ekleyebiliriz. CDN, web sayfalarında üçüncü taraf kütüphanelerini kullanmak için sıkça tercih edilen bir yöntemdir.

Chart.js kütüphanesini sayfamıza eklemek için aşağıdaki kodu kullanabiliriz:

Bu kodu head veya body etiketleri arasına ekleyerek Chart.js kütüphanesini projemize dahil etmiş oluruz. Bundan sonra projemizde grafikler oluşturmak için Chart.js fonksiyonlarını kullanabiliriz.

Chart.js kullanarak veri setleri arasında karşılaştırma grafiği oluşturmak için yapmamız gereken ilk işlem, projemize bir canvas elementi eklemektir. Bu örnekte, aşağıdaki kod satırı kullanılarak bir canvas elementi oluşturulabilir.

Bu canvas elementi, Chart.js tarafından çizilecek grafikleri içerecektir. Canvas elementinin id'si (myChart) daha sonra JavaScript kodunda kullanılacaktır.

Canvas elementi oluşturulduktan sonra, JavaScript kodunu kullanarak Chart.js kütüphanesi çağrılıp grafikler oluşturulabilir. Bu işlem, Chart.js kütüphanesini projemize dahil ederek başlatılabilir. Örneğin, aşağıdaki kod satırı kullanılarak Chart.js kütüphanesi CDN üzerinden projeye eklenir.

Bu şekilde, Chart.js kütüphanesinin kullanımı için gerekli olan hazırlık adımları tamamlanmış olur. Bundan sonraki adımlar, oluşturulacak grafiklerin türüne ve içeriğine bağlı olarak değişebilir.

Bir Chart.js projesinde grafikleri oluşturmak için HTML sayfasında bir canvas elementi oluşturmak gereklidir. Bu element, Chart.js tarafından oluşturulan grafiklere ev sahipliği yapacaktır. Elementin id özelliği, JavaScript kodlarında bu elementi belirlemek için kullanılacaktır. Örneğin, aşağıdaki kod HTML sayfasında bir canvas elementi oluşturur:

Bu canvas elementine, JavaScript tarafından oluşturulan bir grafik eklendiğinde, grafik bu elementin içine otomatik olarak yerleştirilecektir. Grafik boyutları önceden tanımlanmalıdır. Chart.js varsayılan olarak tam sayfa genişliğinde bir grafik oluşturur, ancak özel boyutlandırma da yapılabilmektedir.

Chart.js kütüphanesi, web sayfalarında farklı grafik türleri oluşturmak için kullanılabilir. Bu kütüphane ile çizgi, bar, pasta ve polar area grafikleri oluşturabilirsiniz. Bu makalede örnek olarak bar grafik kullanacağız. Bar grafikleri, farklı kategoriler için değerleri yan yana gösteren grafiklerdir. Örneğin, iki farklı ürünün satış verilerini kullanarak karşılaştırma yapmak için bar grafiklerini kullanabilirsiniz.

Bar Grafik Oluşturma

Bar grafikleri, farklı kategoriler için değerleri yan yana gösteren grafiklerdir. Bu grafik türü, karşılaştırma yapmak istediğiniz farklı veri setlerinin sonuçlarını görsel olarak kolayca karşılaştırmanızı sağlar. Bu makalede ise iki farklı ürünün satış verilerini kullanarak karşılaştırma yapacağız. Örneğin, bir perakende mağazasının ayakkabı ve giysi kategorilerindeki satış performansını karşılaştırmak istediğimizi düşünelim.

Bar grafikleri, yatay veya dikey şekilde gösterilebilir. Bu makalede, dikey bir bar grafik kullanacağız. İlk adım olarak, HTML sayfamızda oluşturduğumuz elementinin bir ID'si olmalıdır. Bu ID'yi kullanarak JavaScript kodunda grafik oluşturacağız.

Bar grafik oluşturmak için, Chart.js kütüphanesi içindeki Chart() fonksiyonunu kullanacağız ve geçerli bir context parametresi sağlamamız gerekiyor. Bu bağlam, önceki örnekte oluşturduğumuz elementidir.

Bu örnekte, ayakkabı ve giysi kategorilerindeki satış verilerini görselleştirmek için bir dikey bar grafik kullanacağız. Aşağıdaki kod örneğinde, Chart.js'yi kullanarak dikey bir bar grafik oluşturuyoruz.

var myChart = new Chart(ctx, {  type: 'bar',  data: {    labels: ['Ayakkabı', 'Giysi'],    datasets: [{      label: 'Satış Verileri',      data: [120, 200],      backgroundColor: [        'rgba(255, 99, 132, 0.2)',        'rgba(54, 162, 235, 0.2)'      ],      borderColor: [        'rgba(255, 99, 132, 1)',        'rgba(54, 162, 235, 1)'      ],      borderWidth: 1    }]  },  options: {    scales: {      yAxes: [{        ticks: {          beginAtZero: true        }      }]    }  }});

Bu kod örneği, labels ve data parametreleri belirterek x ve y ekseni etiketlerini ve satış verilerini belirler. backgroundColor ve borderColor parametreleri, arka plan ve sınır renklerini belirler.

Son olarak, options parametresinde, y ekseninin minimum değerini sıfıra ayarlayarak grafik aralığını ayarlayabiliriz.

Bar grafikler, farklı kategoriler için değerleri kolayca karşılaştırmak için en ideal grafik türlerinden biridir. Chart.js ile bu grafikleri kolayca oluşturabilirsiniz.