Chart.js, HTML5 canvas elementi ve JavaScript kullanılarak interaktif, özelleştirilebilir ve görsel olarak çekici grafikler oluşturmak için kullanılan bir JavaScript kitaplığıdır.
Chart.js, kullanımı kolay bir API’ye sahip ve önceden tanımlanmış bir dizi grafik türü sunar. Çizgi grafikleri, çubuk grafikleri, pasta grafikleri, radar grafikleri, polar alan grafikleri ve daha pek çok grafik türünü destekler.
Chart.js, verileri bir dizi veya JSON formatında alabilir ve grafikleri dinamik olarak güncellemek için bir dizi seçenek sunar. Örneğin, bir REST API’den veri alabilir ve bu verileri bir çizgi grafiği veya çubuk grafiği olarak gösterebilirsiniz.
Chart.js, modern web uygulamaları ve veri görselleştirme için popüler bir seçimdir. Vue.js, React, Angular ve diğer birçok JavaScript çerçevesi ve kütüphanesi ile birlikte kullanılabilir.
Chart.js kullanarak bir grafik oluşturmak oldukça basittir. Öncelikle, Chart.js kitaplığını sayfanıza eklemelisiniz. Bunun için, bir JavaScript dosyası olarak indirebilir veya CDN bağlantısını kullanabilirsiniz. Örneğin, bir CDN bağlantısı kullanarak Chart.js kitaplığını sayfaya ekleyebilirsiniz:
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
</head>
Daha sonra, HTML sayfanızda bir canvas elementi oluşturun ve bu elemente bir ID atayın:
<canvas id="myChart"></canvas>
Son olarak, JavaScript dosyanızda Chart.js’yi kullanarak bir grafik oluşturabilirsiniz. Örneğin, bir çizgi grafiği oluşturmak için:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {}
});
Bu kodda, document.getElementById('myChart') yöntemi ile canvas elementi alınır ve new Chart() yöntemi ile bir çizgi grafiği oluşturulur. type özelliği ile grafik türü belirlenir ve data özelliği ile grafik için veriler belirlenir. options özelliği ise, grafik ayarları için kullanılır.
Chart.js, grafikleri özelleştirmek için birçok seçenek sunar. Renkler, etiketler, eksenler, fontlar, arka planlar, animasyonlar ve diğer birçok özellik grafiklerinizi görsel olarak daha çekici hale getirmenize olanak sağlar.
Örneğin, grafik başlığını, eksen etiketlerini ve renklerini özelleştirmek için aşağıdaki kodu kullanabilirsiniz:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
plugins: {
title: {
display: true,
text: 'My Chart',
font: {
size: 24
}
},
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Value'
}
},
x: {
title: {
display: true,
text: 'Month'
}
}
}
}
});
Bu kodda, plugins özelliği ile grafik başlığı ve açıklama gibi plugin’leri etkinleştirebilirsiniz. legend özelliği, efsaneyi gizlemek için kullanılır. scales özelliği ile y ve x eksenlerini özelleştirebilirsiniz.
Chart.js, diğer JavaScript kütüphaneleri ve çerçeveleri ile de uyumludur. Örneğin, Vue.js kullanarak bir Chart.js grafiği oluşturmak için, vue-chartjs adlı bir Vue.js bileşeni kullanabilirsiniz.
Chart.js, popüler bir JavaScript grafik kütüphanesi olması nedeniyle, web geliştirme projelerinde yaygın olarak kullanılır. Özellikle, veri görselleştirme, analiz ve raporlama için kullanılır.