Çubuk grafiklerden çizgi grafiklere ve daha fazlasına kadar çeşitli çizelgeleri çizmek için oldukça az sayıda JavaScript kitaplığı vardır. JavaScript ile web sitenizde verileri dinamik olarak nasıl görüntüleyeceğinizi öğreniyorsanız, Chart.js denemeniz gereken böyle bir kitaplıktır.

Chart.js ile veri görselleştirmeleri oluşturmaya nasıl başlayabilirsiniz? Bu makalede nasıl yapılacağını öğreneceksiniz.

Başlayalım.

Chart.js Nedir?

Chart.js, HTML ile oluşturulabilir çizelgeleri çizmek için kullanılan açık kaynaklı bir veri görselleştirme JavaScript kitaplığıdır. Şu anda canlandırabileceğiniz sekiz farklı etkileşimli grafik türünü desteklemektedir. chart.js ile HTML tabanlı bir grafik oluşturmak için, onu tutacak bir HTML tuvaline ihtiyacınız vardır.

Kitaplık, bir dizi veri kümesini ve arka plan rengi, kenarlık rengi ve daha fazlası gibi diğer özelleştirme parametrelerini kabul eder. Veri kümelerinden biri, etiket, X eksenindeki değerleri temsil eder. Diğeri, tipik olarak Y ekseni üzerinde uzanan bir dizi sayısal değerdir.

Ayrıca, kitaplığın hangi grafiği çizeceğini bilmesi için grafik nesnesi içinde grafik türünü belirtmeniz gerekir.

Chart.js ile Grafikler Nasıl Oluşturulur

Daha önce de belirttiğimiz gibi, çeşitli türlerde grafikler oluşturabilirsiniz. chart.js. Bu öğretici için çizgi ve çubuk grafiklerle başlayacaksınız. Bunların arkasındaki konsepti kavradığınızda, mevcut diğer çizelgeleri çizmek için ihtiyacınız olan tüm araçlara ve güvene sahip olacaksınız.

İlişkili:Web Sitenizi CSS ve JavaScript ile Duyarlı ve Etkileşimli Hale Getirme

kullanmaya başlamak için chart.js, gerekli dosyaları oluşturun. Bu öğretici için dosya adları grafik.html, arsa.js, ve index.css. Dosyalarınız için herhangi bir adlandırma kuralı kullanabilirsiniz.

Şimdi, aşağıdakini yapıştırın kafa HTML dosyanızın Chart.js içerik dağıtım ağına (CDN) bağlanacak bölümü.

İçinde grafik.html:

kaynak=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Ardından, grafiğinizi tutmak için bir HTML tuvali oluşturun ve ona bir İD. Ayrıca, içindeki CSS (index.css) dosyasına bağlanın. kafa bölümüne gidin ve JavaScript (plot.js) dosyanızın üzerine gelin. gövde Bölüm.

HTML dosyasının yapısı şöyle görünür:

 Grafikler

ve senin içinde CSS:

gövde{
 arka plan rengi:#383735;
}
h1{
 renk:#e9f0e9;
 marj-sol: %43;
}
#arsalar{
 kenar boşluğu: otomatik;
 arka plan rengi: #2e2d2d;
}

Yukarıdaki CSS stili belirlenmiş bir kural değildir. Böylece DOM yapınıza bağlı olarak kendi stilinizi istediğiniz gibi şekillendirebilirsiniz. HTML ve CSS dosyalarınız hazır olduğunda, JavaScript ile çizelgelerinizi çizmenin zamanı geldi.

Çizgi Grafiği

İle bir çizgi grafiği yapmak için chart.js, grafiği sen ayarlayacaksın tip ile astar. Bu, kütüphaneye bir çizgi grafiği çizmesini söyler.

Bunu göstermek için JavaScript dosyanızda:

// HTML tuvalini kimliğine göre al
grafikler = document.getElementById("grafikler");
// X ve Y eksenleri için örnek veri kümeleri
var aylar = ["Ocak", "Şubat", "Mar", "Nis", "Mayıs", "Haz", "Temmuz"]; //X ekseninde kalır
var trafik = [65, 59, 80, 81, 56, 55, 60] //Y ekseninde kalır
// Chart nesnesinin bir örneğini oluşturun:
yeni Grafik (grafikler, {
 tip: 'satır', // Grafik türünü bildir
 veri: {
 etiketler: aylar, //X ekseni verileri
 veri kümeleri: [{
 veri trafiği, //Y ekseni verileri
 arkaplanRenk: '#5e440f',
 borderColor: 'beyaz',
 doldurun: yanlış, // Çizginin altındaki eğriyi babckground rengiyle doldurur. Varsayılan olarak doğrudur
 }]
 },
});

Çıktı:

değiştirmek için çekinmeyin doldurmak değer doğru, daha fazla veri kullanın veya ne olduğunu görmek için renkleri değiştirin.

Ayrıca görebileceğiniz gibi, grafiğin üst kısmında küçük bir açıklama kutusu var. Bunu isteğe bağlı olarak kaldırabilirsiniz. seçenekler parametre.

bu seçenekler parametresi, efsaneyi kaldırmanın veya dahil etmenin yanı sıra diğer özelleştirmelere de yardımcı olur. Örneğin, bir ekseni sıfırdan başlamaya zorlamak için kullanabilirsiniz.

beyan etmek seçenekler parametresi, JavaScript dosyanızda grafik bölümünün nasıl göründüğü:

// Chart nesnesinin bir örneğini oluşturun:
yeni Grafik (grafikler, {
 tip: 'satır', // Grafik türünü bildir
 veri: {
 etiketler: aylar, //X ekseni verileri
 veri kümeleri: [{
 veri trafiği, //Y ekseni verileri
 arkaplanRenk: '#5e440f', // Noktaların rengi
 borderColor: 'beyaz', //Çizgi rengi
 doldurun: yanlış, // Çizginin altındaki eğriyi babckground rengiyle doldurur. Varsayılan olarak doğrudur
 }]
 },
 // Özel seçenekleri belirtin:
 seçenekler:{
 açıklama: {görüntüleme: yanlış}, // Gösterge kutusunu false olarak ayarlayarak kaldırın. Varsayılan olarak doğrudur.
// Tartılar için ayarları belirtin. Y eksenini sıfırdan başlatmak için, örneğin:
 ölçekler:{
 yAxes: [{tikler: {min: 0}}] //Tamsayılar içeriyorsa aynısını X ekseni için de tekrarlayabilirsiniz.
 }
 } 
});

Çıktı:

Her nokta için farklı arka plan renkleri de kullanabilirsiniz. Arka plan renklerini bu şekilde değiştirmek, çubuk grafiklerde genellikle daha yararlıdır.

Chart.js ile Çubuk Grafikler Yapmak

Burada sadece grafiği değiştirmeniz gerekiyor tip ile Çubuk. ayarlamanıza gerek yok doldurmak seçeneği, çünkü çubuklar arka plan rengini otomatik olarak devralır:

// Chart nesnesinin bir örneğini oluşturun:
yeni Grafik (grafikler, {
 tip: 'çubuk', // Grafik türünü bildir
 veri: {
 etiketler: aylar, //X ekseni verileri
 veri kümeleri: [{
 veri trafiği, //Y ekseni verileri
 arkaplanRenk: '#3bf70c', //Çubukların rengi
 }]
 },
 seçenekler:{
 açıklama: {görüntüleme: yanlış}, // Gösterge kutusunu false olarak ayarlayarak kaldırın. Varsayılan olarak doğrudur.
 }
});

Çıktı:

Çizgi grafik için yaptığınız gibi Y eksenini sıfırdan veya herhangi bir değerden başlamaya zorlamaktan çekinmeyin.

İlişkili:Uzmanlaşmanız Gereken JavaScript Dizi Yöntemleri

Her çubuk için farklı renkler kullanmak için verilerinizdeki öğe sayısıyla eşleşen bir renk dizisini arka plan rengi parametre:

// Chart nesnesinin bir örneğini oluşturun:
yeni Grafik (grafikler, {
 tip: 'çubuk', // Grafik türünü bildir
 veri: {
 etiketler: aylar, //X ekseni verileri
 veri kümeleri: [{
 veri trafiği, //Y ekseni verileri
//Her çubuğun rengi:
 arka plan rengi: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 seçenekler:{
 açıklama: {görüntüleme: yanlış}, // Gösterge kutusunu false olarak ayarlayarak kaldırın. Varsayılan olarak doğrudur.
 }
});

Çıktı:

Chart.js ile Pasta Grafik Oluşturma

Pasta grafiği çizmek için grafik türünü şu şekilde değiştirin: turta. Ayrıca efsanenin görüntüsünü şu şekilde ayarlamak isteyebilirsiniz: doğru pastanın her bir bölümünün neyi temsil ettiğini görmek için:

// Chart nesnesinin bir örneğini oluşturun:
yeni Grafik (grafikler, {
 type: 'pie', // Grafik türünü bildir
 veri: {
 etiketler: aylar, //Her segmenti tanımlar
 veri kümeleri: [{
 data: trafik, // Segment boyutunu belirler
 //Her segmentin rengi
 arka plan rengi: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 seçenekler:{
 legend: {display: true}, //Bu, varsayılan olarak doğrudur.
}
});

Çıktı:

Yukarıdaki örneklerde yaptığınız gibi, diğer çizelgeleri değiştirerek deneyebilirsiniz. tip.

Bununla birlikte, burada desteklenenlerin bir listesi chart.js yukarıdaki kodlama kurallarını kullanarak deneyebileceğiniz grafik türleri:

• Çubuk
• astar
• saçılma
• tatlı çörek
• turta
• radar
• polarArea
• kabarcık

Chart.js ile Oynayın

Bu öğreticide yalnızca çizgi, pasta ve çubuk grafikleri öğrenmiş olsanız da, chart.js ile diğer çizelgeleri çizmek için kullanılan kod deseni de aynı kuralı izler. Bu yüzden diğerleriyle de oynamaktan çekinmeyin.

Bununla birlikte, chart.js'nin sunduğundan daha fazlasını istiyorsanız, diğer bazı JavaScript grafik kitaplıklarına da bakmak isteyebilirsiniz.

Öğrenmeye Değer 6 JavaScript Çerçevesi

Geliştirmeye yardımcı olacak birçok JavaScript çerçevesi vardır. İşte bilmeniz gerekenler.

Sonrakini Oku

Yazar hakkında