Co to są wykresy Google?
Mapy Google to interfejs API Google
Czcionki Google to interfejs API Google
Wykresy Google to interfejs API Google
Dowiedz się, jak dodać Wykresy Google do swojej strony internetowej.
Przykład
Wykres kołowy Google
Zacznij od prostej podstawowej strony internetowej.
Dodaj element <div> o identyfikatorze „piechart”:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<div id="piechart"></div>
</body>
<html>
Dodaj odniesienie do Chart API na google.com:
Przykład
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
I dodaj funkcję JavaScript:
Przykład
<script type="text/javascript">
// Load google charts
google.charts.load('current',
{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data =
google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Friends', 2],
['Eat', 2],
['TV',
2],
['Gym', 2],
['Sleep', 8]
]);
// Optional; add
a title and set the width and height of the chart
var options = {'title':'My
Average Day', 'width':550, 'height':400};
// Display the chart
inside the <div> element with id="piechart"
var chart = new
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>