Google-diagram

Från enkla liniediagram till komplexa hierarkiska träd, erbjuder Google Charts-biblioteket ett brett utbud av图表typer som är redo att använda:

  • Spridningsdiagram (Scatter Chart)
  • Liniediagram (Line Chart)
  • Stapeldiagram (Bar / Column Chart)
  • Ytdiagram (Area Chart)
  • Cirkeldiagram (Pie Chart)
  • Donut-diagram (Donut Chart)
  • Organisationsstruktur (Org Chart)
  • Karta/Geografisk diagram (Map / Geo Chart)

Hur använder man Google Chart?

Om du vill använda Google Chart på din webbsida,Lägg till en länk till diagramladdaren:

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

Google Charts är lätt att använda.

Lägg till en <div> Elementet kan visa diagrammet:

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

Ett <div>-element måste ha ett unikt ID.

Ladda sedan Google Graph API:

  1. Ladda Visualization API och corechart-paketet.
  2. Ange en returfunktion som körs när API:et har laddats.
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

och så är det det!}

line-chart

Källkod

function drawChart() {
// Ställ in data
var data = google.visualization.arrayToDataTable([
  ['Pris', 'Storlek'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// Ställ in alternativ
var options = {
  title: 'Bostadspris och husyta',
  hAxis: {title: 'Kvadratmeter'},
  vAxis: {title: 'Miljoner pris'},
  legend: 'none'
};
// Rita diagram
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Prova själv

scatter-chart

med samma data för att skapascatter-chart，var vänligen byt google.visualization ändra till ScatterChart:

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

Prova själv

bar-chart

Källkod

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

Prova själv

pie-chart

För att konvertera en bar-chart tillpie-chart，endast använda:

google.visualization.PieChart

Ersätt:

google.visualization.BarChart

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

Prova själv

3D-pie-chart

För att visa en pie-chart i 3D-form, behöver du bara is3D: true Lägg till i alternativen:}

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

Prova själv