Google Charts
Od prostych krzywych po złożone drzewa hierarchiczne, biblioteka Google Charts oferuje szeroką gamę dostępnych typów wykresów:
- Rozrzut (Scatter Chart)
- Krzywa (Line Chart)
- Kolumny/Bar Chart (Bar / Column Chart)
- Powierzchnia (Area Chart)
- Tarta (Pie Chart)
- Ciasto marchewkowe (Donut Chart)
- Struktura organizacyjna (Org Chart)
- Mapa/Geograficzny wykres (Map / Geo Chart)
Jak używać Google Chart?
Jeśli chcesz używać Google Chart na swojej stronie internetowej, proszęDodaj link do ładowarki wykresu:
<script src="https://www.gstatic.com/charts/loader.js"> </script>
Google Charts jest łatwy w użyciu.
Wystarczy dodać jedną <div> Element może wyświetlać wykres:
<div id="myChart" style="max-width:700px; height:400px"></div>
Element <div> 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(drawChart);
i to wszystko!
wykres liniowy
Kod źródłowy
function drawChart() { // Ustawienia danych var data = 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: 'Metr kwadratowy'}, vAxis: {title: 'Cena w milionach'}, legend: 'none' }; // Narysuj wykres var chart = new google.visualization.LineChart(document.getElementById('myChart')); chart.draw(data, options); }
wykres punktowy
te same dane, aby wygenerowaćwykres punktowy, proszę google.visualization
zmień na ScatterChart
:
var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
wykres słupkowy
Kod źródłowy
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Contry', 'Mhl'], ['Włochy', 55], ['Francja', 49], ['Hiszpania', 44], ['Stany Zjednoczone', 24], ] var options = { title: 'Produkcja wina na całym świecie' }; var chart = new google.visualization.BarChart(document.getElementById('myChart')); chart.draw(data, options); }
wykres kołowy
Aby przekształcić wykres słupkowy wwykres kołowyWystarczy użyć:
google.visualization.PieChart
Zastąp:
google.visualization.BarChart
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
3D wykres kołowy
Aby wyświetlić wykres kołowy w formacie 3D, wystarczy is3D: true
dodaj do opcji:
var options = { title: 'Produkcja wina na całym świecie', is3D: true };