Sisällysluettelo
Näytä sisällysluettelo
Graafiset kirjastot
JavaScript-kirjastot kaikenlaisille kaavioille:
Plotly.js
Chart.js
Google-kaavio
Plotly.js
Plotly.js on kaaviokirjasto, joka sisältää yli 40 kaaviotyyppiä, 3D-kaavioita, tilastollisia kaavioita ja SVG-karttoja.
<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 sisältää monia sisäänrakennettuja kaaviotyyppejä:
Hajaantua
Linja
Baari
Tutka
Piirakka ja donitsi
Napa-alue
Kupla
<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-kaavio
Yksinkertaisista viivakaavioista monimutkaisiin puukarttoihin, Google Chart tarjoaa useita sisäänrakennettuja kaaviotyyppejä:
Sirontakaavio
Viivakaavio
Pylväs-/pylväskaavio
Aluekaavio
Ympyrädiagrammi
Donitsi kaavio
Organisaatiokaavio
Kartta/Geo-kaavio
<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);
}