Google Grafikleri nedir?

❮ Öncesi Sonraki ❯

HTML

Google Haritalar bir Google API'sidir

Google Yazı Tipleri bir Google API'sidir

Google Charts bir Google API'sidir

Google Grafiklerini web sayfanıza nasıl ekleyeceğinizi öğrenin.

Örnek

Google Pasta Grafiği

Basit bir temel web sayfasıyla başlayın.

"piechart" kimliğine sahip bir <div> öğesi ekleyin:

Örnek

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

</body>
<html>

google.com adresindeki Grafik API'sine bir referans ekleyin:

Örnek

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

Ve bir JavaScript işlevi ekleyin:

Örnek

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

❮ Öncesi Sonraki ❯