Google Charts

Od prostych diagramów liniowych do złożonych drzew klastrowych, biblioteka diagramów Google oferuje szeroki wybór typów diagramów dostępnych w dowolnym momencie:

  • Diagram punktowy
  • Diagrama liniowy
  • Diagrama pionowy / kolumnowy
  • Diagrama obszarowy
  • Diagrama kołowego
  • Diagrama donuta
  • Diagrama struktury organizacyjnej
  • Mapa / Diagrama geograficznego

jak używać Google Chart?

jeśli chcesz używać Google Chart na swojej stronie internetowej, proszędodaj link do ładowarki diagramów:

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

Google Charts jest łatwy w użyciu.

wystarczy dodać jeden <div> element może wyświetlać diagram:

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

<div> element musi mieć unikalny ID.

następnie załaduj Google Graph API:

  1. załaduj Visualization API i pakiet corechart
  2. ustaw funkcję zwrotną, która zostanie wywołana po załadowaniu API
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(rysujDiagram);

to wszystko!

diagram liniowy

kod źródłowy

function rysujDiagram() {
// ustawienia danych
var dane = google.visualization.arrayToDataTable([
  ['cena', 'rozmiar'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]);
// ustawienia
var options = {
  title: 'cena mieszkania i powierzchnia',
  hAxis: {title: 'metry kwadratowe'},
  vAxis: {title: 'cena w milionach'},
  legend: 'none'
};
// rysuj diagram
var diagram = new google.visualization.LineChart(document.getElementById('myDiagram'));
chart.draw(data, options);
}

Spróbuj sam

diagramy rozproszone

te same dane, aby utworzyćdiagramy rozproszoneproszę, zmień google.visualization zmień na ScatterChart:

var diagram = new google.visualization.ScatterChart(document.getElementById('myDiagram'));

Spróbuj sam

diagram słupkowy

kod źródłowy

function rysujDiagram() {
var dane = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Włochy', 55],
  ['Francja', 49],
  ['Hiszpania', 44],
  ['Stany Zjednoczone', 24],
  ['Argentyna', 15]
]);
var options = {
  title: 'Globalne produkcja wina'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Spróbuj sam

Wykres kołowy

Aby przekształcić wykres słupkowy w:Wykres kołowyi użyj zamiast tego:

google.visualization.PieChart

Zastąp:

google.visualization.BarChart

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

Spróbuj sam

Wykres kołowy 3D

Aby wyświetlić wykres kołowy w formacie 3D, wystarczy dodać: is3D: true Dodaj do opcji:

var options = {
  title: 'Globalne produkcja wina',
  is3D: true
};

Spróbuj sam