İçindekiler
İçindekiler tablosunu göster
Grafik Kütüphaneleri
Her türlü grafik için kullanılacak JavaScript kitaplıkları:
Plotly.js
Chart.js
Google Grafiği
Plotly.js
Plotly.js, 40'tan fazla grafik türü, 3D grafikler, istatistiksel grafikler ve SVG haritalarıyla birlikte gelen bir grafik kitaplığıdır.
<script>
var xArray = ["Italy","France","Spain","USA","Argentina"];
var yArray = [55, 49, 44, 24, 15];
var data = [{labels:xArray, values:yArray, type:"pie"}];
var layout = {title:"World Wide Wine Production"};
Plotly.newPlot("myPlot24", data, layout);
Chart.js
Chart.js birçok yerleşik grafik türüyle birlikte gelir:
Dağılım
Astar
Çubuk
Radar
Turta ve Çörek
Kutup Alanı
Kabarcık
<script>
var chart13 = new Chart("myPlot13", {
type: 'bar',
data: {
labels: ["Italy","France","Spain","USA","Argentina"],
datasets: [{
backgroundColor:["red", "green","blue","orange","brown"],
data: [55, 49, 44, 24, 15]
}]
},
options: {
legend: {display: false},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: "World Wide Wine Production 2018",
fontSize: 16
}
}
});
Google Grafiği
Basit çizgi grafiklerden karmaşık ağaç haritalarına kadar, Google Chart bir dizi yerleşik grafik türü sağlar:
Dağılım çizelgesi
Çizgi grafik
Çubuk/Sütun Grafiği
Alan Grafiği
Yuvarlak diyagram
Halka Tablosu
Organizasyon Şeması
Harita/Coğrafi Grafik
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart22);
function drawChart22() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain',44],
['USA',24],
['Argentina',15]
]);
var options = {
title:'World Wide Wine Production'
};
var chart = new google.visualization.PieChart(document.getElementById('myChart22'));
chart.draw(data, options);
}