Obsah
Zobrazit obsah
Grafické knihovny
Knihovny JavaScriptu k použití pro všechny druhy grafů:
Plotly.js
Chart.js
Google Chart
Plotly.js
Plotly.js je grafická knihovna, která obsahuje více než 40 typů grafů, 3D grafy, statistické grafy a mapy SVG.
<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 přichází s mnoha vestavěnými typy grafů:
Rozptyl
Čára
Bar
Radar
Koláč a kobliha
Polární oblast
Bublina
<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 Chart
Od jednoduchých spojnicových grafů po složité stromové mapy, Google Chart nabízí řadu integrovaných typů grafů:
Bodový graf
Spojnicový graf
Pruhový/sloupcový graf
Plošný graf
Koláčový graf
Koblihový graf
Organizační schéma
Mapa/Geo Chart
<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);
}