Çubuk grafiklerden çizgi grafiklere ve daha fazlasına kadar çeşitli grafikleri çizmek için birkaç JavaScript kitaplığı vardır. JavaScript, Chart ile web sitenizde dinamik olarak iyi mi veri görüntüleneceğini öğreniyorsanız.js denemeniz ihtiyaç duyulan bir kitaplıktır.

Chart.js ile veri görselleştirmeleri meydana getirmeye iyi mi başlayabilirsiniz? Iyi mi bulunduğunu bu makalede öğreneceksiniz.

Hadi başlamış olalım.

Grafik Nedir.js?

Grafik.js HTML işlenebilir grafikleri çizmek için kullanılan açık kaynaklı bir veri görselleştirme JavaScript kitaplığıdır. Şu anda, animasyon da canlandırabileceğiniz sekiz değişik etkileşimli grafik türünü desteklemektedir. Grafik.js ile HTML tabanlı bir grafik yapmak için, onu tutmak için bir HTML tuvaline ihtiyacınız vardır.

Kitaplık, bir veri kümesi kümesini ve arka plan rengi, kenarlık rengi ve daha fazlası şeklinde öteki özelleştirme parametrelerini kabul eder. Veri kümelerinden biri, etiket, X eksenindeki değerleri temsil eder. Diğeri, çoğu zaman Y ekseninde bulunan bir sayısal değerler kümesidir.

Kitaplığın hangi grafiğin çiz yapılacağını bilmesi için grafik nesnesi içindeki grafik türünü de belirtmeniz gerekir.

Grafikli Grafikler Iyi mi Oluşturulur.js

Daha ilkin de belirttiğimiz şeklinde, çeşitli grafik türleri oluşturabilirsiniz. grafik.js. Bu öğretici için çizgi ve çubuk grafiklerle başlayacaksınız. Bunların arkasındaki terimi kavradıktan sonrasında, mevcut öteki grafikleri çizmek için ihtiyacınız olan tüm araçlara ve güvene haiz olacaksınız.

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

Kullanmaya adım atmak için grafik.js, lüzumlu dosyaları oluşturun. Bu öğretici için, dosya adları grafik.html, arsa.jsve dizin.css. Dosyalarınız için herhangi bir adlandırma kuralını kullanabilirsiniz.

Şimdi, aşağıdakileri baş grafik.js içerik teslim ağına (CDN) bağlanmak için HTML dosyanızın bir kısmı.

İçinde grafik.html:

Arkasından, grafiğinizi tutmak ve KİMLİĞİ. Ek olarak, CSS (index.css) dosyasına baş bölümünde JavaScript (çizim.js) dosyanızın üstünde gövde bölüm.

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

Grafik

Ve senin. CSS:

body{
background-color:#383735;
}
h1{
color:#e9f0e9;
margin-left:43%;
}
#plots{
margin:auto;
background-color: #2e2d2d;
}

Yukarıdaki CSS stili ayarlanmış bir kaide değildir. Böylece DOM yapınıza bağlı olarak istediğiniz şeklinde yoldam oluşturabilirsiniz. HTML ve CSS dosyalarınız hazır olduğunda, grafiklerinizi JavaScript ile çizmenin zamanı gelmiştir.

Çizgi Grafik

Ile çizgi grafik yapmak için grafik.js, grafiği ayarlarsınız tür Hedef satır. Bu, kitaplığa bir çizgi grafik çizmesini söyler.

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

// Get the HTML canvas by its id 
plots = document.getElementById("plots");
// Example datasets for X and Y-axes 
var months = ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"); //Stays on the X-axis 
var traffic = (65, 59, 80, 81, 56, 55, 60) //Stays on the Y-axis 
// Create an instance of Chart object:
new Chart(plots, {
type: 'line', //Declare the chart type 
data: {
labels: months, //X-axis data 
datasets: ({
data: traffic, //Y-axis data 
backgroundColor: '#5e440f',
borderColor: 'white',
fill: false, //Fills the curve under the line with the babckground color. It's true by default 
})
},
});

Çıktı:

Değiştirebilmek için çekinmeyin doldurmak kıymeti doğru, daha çok veri kullanın, yada renkleri değişiklik yapmak Neler olacağını görmek için.

Gördüğünüz şeklinde, grafiğin üst kısmında minik bir gösterge kutusu var. Bunu isteğe bağlı bir Seçenekler parametre.

Bu, bir sonraki Seçenekler parametresi, göstergeyi kaldırmanın yada eklemenin yanı sıra öteki özelleştirmelere de destek verir. Mesela, bir ekseni sıfırdan başlamaya zorlamak için kullanabilirsiniz.

Bir Seçenekler parametresi, grafik bölümünün JavaScript dosyanızda iyi mi görünmüş olduğu aşağıda açık şekilde görünür:

// Create an instance of Chart object:
new Chart(plots, {
type: 'line', //Declare the chart type 
data: {
labels: months, //X-axis data 
datasets: ({
data: traffic, //Y-axis data 
backgroundColor: '#5e440f', //Color of the dots 
borderColor: 'white', //Line color 
fill: false, //Fills the curve under the line with the babckground color. It's true by default 
})
},
 //Specify custom options: 
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. 
//Specify settings for the scales. To make the Y-axis start from zero, for instance:
scales:{
yAxes: ({ticks: {min: 0}}) //You can repeat the same for X-axis if it contains integers. 
}
} 
});

Çıktı:

Her nokta için değişik arka plan renkleri de kullanabilirsiniz. Arka plan renklerini bu şekilde değişiklik yapmak çoğu zaman çubuk grafiklerde daha yararlıdır.

Grafikle Çubuk Grafikler Oluşturma.js

Burada, yalnızca grafiği değiştirmeniz gerekir tür Hedef çubuk. Ayarlamanıza gerek kalmamıştır. doldurmak bu sebeple çubuklar arka plan rengini otomatikman devralır:

// Create an instance of Chart object:
new Chart(plots, {
type: 'bar', //Declare the chart type 
data: {
labels: months, //X-axis data 
datasets: ({
data: traffic, //Y-axis data 
backgroundColor: '#3bf70c', //Color of the bars 
})
},
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. 
}
});

Çıktı:

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

İlgili:Ustalaşmanız Ihtiyaç duyulan JavaScript Dizi Şekilleri

Her çubuk için değişik renkler kullanmak için, verilerinizdeki unsur sayısıyla eşleşen bir renk dizisini backgroundColor parametre:

// Create an instance of Chart object:
new Chart(plots, {
type: 'bar', //Declare the chart type 
data: {
labels: months, //X-axis data 
datasets: ({
data: traffic, //Y-axis data 
//Color of each bar:
backgroundColor: (
"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)"),
})
},
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default. 
}
});

Çıktı:

Grafikle Pasta Grafik Oluşturma.js

Pasta grafik çizmek için grafik türünü Pasta. Göstergenin ekranını doğru pastanın her bir bölümünün neyi temsil edeni görmek için:

// Create an instance of Chart object:
new Chart(plots, {
type: 'pie', //Declare the chart type
data: {
labels: months, //Defines each segment
datasets: ({
data: traffic, //Determines segment size
//Color of each segment
backgroundColor: (
"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)"),
})
},
options:{
legend: {display: true}, //This is true by default.
}
});

Çıktı:

Yukarıdaki örneklerde yaptığınız şeklinde, tür.

Bununla beraber, işte desteklenenlerin bir sıralaması grafik.js yukarıdaki kodlama kurallarına bakılırsa deneyebileceğiniz grafik türleri:

• çubuk
• satır
• yaymak
• Halka
• Pasta
• radar
• polarArea
• köpük

Grafikle Oyna.js

Bu öğreticide yalnızca çizgi, pasta ve çubuk grafikleri elinizin tersi olmasına karşın, grafikle öteki grafikleri çizmek için kod deseni.js aynı kuralı izler. Bu yüzden diğerleriyle de oynamaktan çekinmeyin.

Bununla beraber, .js sunmuş olduğu grafikten daha fazlasını istiyorsanız, öteki bazı JavaScript grafik kitaplıklarına da göz atmak isteyebilirsiniz.