Google Grafikler - Yapılandırma Sözdizimi
Bu bölümde, Google Chart API kullanarak bir grafik çizmek için gereken yapılandırmayı göstereceğiz.
1. Adım: HTML Sayfası Oluşturun
Google Chart kitaplıklarıyla bir HTML sayfası oluşturun.
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
Buraya containerdiv, Google Grafik kitaplığı kullanılarak çizilen grafiği içermek için kullanılır. Burada google.charts.load yöntemini kullanarak corecharts API'sinin en son sürümünü yüklüyoruz.
2. Adım: Yapılandırmalar oluşturun
Google Chart kitaplığı, json sözdizimini kullanan çok basit yapılandırmalar kullanır.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);
Buradaki veriler, json verilerini temsil eder ve seçenekler, Google Chart kitaplığının draw () yöntemini kullanarak kapsayıcı div içeren bir grafik çizmek için kullandığı yapılandırmayı temsil eder. Şimdi, gerekli json dizesini oluşturmak için çeşitli parametreleri yapılandıracağız.
Başlık
Grafiğin seçeneklerini yapılandırın.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};
Veri tablosu
Grafikte görüntülenecek verileri yapılandırın. DataTable, grafiğin verilerini içeren özel bir tablo yapılı koleksiyondur. Veri tablosunun sütunları lejantları temsil eder ve satırlar karşılık gelen verileri temsil eder. addColumn () yöntemi, birinci parametrenin veri türünü ve ikinci parametrenin açıklamayı temsil ettiği bir sütun eklemek için kullanılır. Buna göre satır eklemek için addRows () yöntemi kullanılır.
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
3. Adım: Grafiği çizin
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);
Misal
Tam örnek aşağıdadır -
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById ('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Aşağıdaki kod, Google Grafik kitaplığı tamamen yüklendiğinde grafik çizmek için drawChart işlevini çağırır.
google.charts.setOnLoadCallback(drawChart);
Sonuç
Sonucu doğrulayın.