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:
- załaduj Visualization API i pakiet corechart
- 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); }
diagramy rozproszone
te same dane, aby utworzyćdiagramy rozproszoneproszę, zmień google.visualization
zmień na ScatterChart
:
var diagram = new google.visualization.ScatterChart(document.getElementById('myDiagram'));
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); }
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'));
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 };