Google-kaaviot

Google图表 kirjasto tarjoaa laajan valikoiman kaavioita, jotka ovat käytettävissä milloin tahansa, mistä yksinkertaisista viivakaavioista monimutkaisiin kerrostetuksi puurakenteisiin:

  • Levykaavio (Scatter Chart)
  • Viivakaavio (Line Chart)
  • Palkkikaavio/Col Chart (Bar / Column Chart)
  • Aluekaavio (Area Chart)
  • Piikaavio (Pie Chart)
  • Suklaakakku kaavio (Donut Chart)
  • Organisaatiokaavio (Org Chart)
  • Kartta/geografinen kaavio (Map / Geo Chart)

Kuinka käyttää Google Chartia?

Jos haluat käyttää Google Chartia sivustollasi, sinun täytyyLisää linkki kaavion lataajaan:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

Google Charts on helppokäyttöinen.

Riittää, kun lisää <div> Elementti näyttää kaavion:

<div id="myChart" style="max-width:700px; height:400px"></div>

Elementin täytyy olla ainutlaatuinen ID.

Tässä seuraa Google Graph API:n lataaminen:

  1. Lataa Visualization API ja corechart-paketti
  2. Aseta paluutoiminto, joka kutsutaan API:n lataamisen jälkeen
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

ja se on valmis!]}

viivakaavio

Lähdekoodi

function drawChart() {
// Aseta tiedot
var data = google.visualization.arrayToDataTable([
  ['Hinta', 'Koko'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]);
// Aseta vaihtoehdot
var options = {
  title: 'Asunnon hinta ja koko',
  hAxis: {title: 'Neliömetri'},
  vAxis: {title: 'Miljoonan hinta'},
  legend: 'none'
};
// Piirrä kaavio
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Kokeile itse

säteet

samaa tietoa voidaan tuottaasäteet，paina: google.visualization muutetaan ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

Kokeile itse

viivakaavio

Lähdekoodi

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italia', 55],
  ['Ranska', 49],
  ['Espanja', 44],
  ['Yhdysvallat', 24],
  ['Argentiina', 15]
]);
var options = {
  title: 'Maailman viinintuotanto'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Kokeile itse

pizza

Jos haluat muuntaa viivakaavionpizzavain käyttämällä:

google.visualization.PieChart

korvata:

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

Kokeile itse

3D-pizza

Jos haluat näyttää pizzan 3D-muodossa, sinun täytyy vain is3D: true lisää valintoihin:}}

var options = {
  title: 'Kansainvälinen viinintuotanto',
  is3D: true
};

Kokeile itse