Google-grafik

Fra en simpel linjetegning til et komplekst lagdelt trædiagram tilbyder Google Charts biblioteket en række diagramtyper, der er klar til brug:

  • Spredningsdiagram (Scatter Chart)
  • Linetegning (Line Chart)
  • Stabdiagram / Kolonner (Bar / Column Chart)
  • Fladediagram (Area Chart)
  • Cirkeldiagram (Pie Chart)
  • Donut-diagram (Donut Chart)
  • Organisationsdiagram (Org Chart)
  • Kort / Geografisk diagram (Map / Geo Chart)

Hvordan bruger man Google Chart?

Hvis du vil bruge Google Chart på din hjemmeside, skal duTilføj et link til diagramlæseren:

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

Google Charts er nemt at bruge

Tilføj kun én <div> Elementet kan vise diagrammet:

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

En <div>-element skal have en unik ID.

Dernæst indlæs Google Graph API:

  1. Indlæs Visualization API og corechart-pakken
  2. Indstil en tilbagekaldelsesfunktion, der udføres efter API'en er blevet indlæst
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

det er det!]}

linediagram

Kildekode

function drawChart() {
// Indstil data
var data = google.visualization.arrayToDataTable([
  ['Pris', 'Størrelse'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// Indstil indstillinger
var options = {
  title: 'Pris og husareal',
  hAxis: {title: 'Kvadratmeter'},
  vAxis: {title: 'Millioner pris'},
  legend: 'none'
};
// Tegn diagram
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Prøv det selv

scatterdiagram

med samme data skal genereresscatterdiagram，sæt: google.visualization ændres til ScatterChart:

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

Prøv det selv

stregdiagram

Kildekode

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italien', 55],
  ['Frankrig', 49],
  ['Spanien', 44],
  ['USA', 24],
  
]
var options = {
  title: 'Global vinproduktion'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Prøv det selv

cirkel-diagram

For at konvertere en stregdiagram tilcirkel-diagram，brug kun:

google.visualization.PieChart

Erstat:

google.visualization.BarChart

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

Prøv det selv

3D-cirkel-diagram

For at vise en cirkel-diagram i 3D-format, skal du kun is3D: true tilføj til valg: }}

var options = {
  title: 'Global vinproduktion',
  is3D: true
};

Prøv det selv