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:

  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(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);
}

Spróbuj sam

wykres punktowy

te same dane, aby wygenerowaćwykres punktowy, proszę google.visualization zmień na ScatterChart:

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

Spróbuj sam

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);
}

Spróbuj sam

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'));

Spróbuj sam

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
};

Spróbuj sam