Neueste Web-Entwicklung Tutorials
 

Google Charts Tutorial



Google Charts sind eine reine JavaScript - basierte Charting - Bibliothek bedeutete Webanwendungen Fähigkeit durch Hinzufügen von interaktiver Charting zu verbessern. Google Chart bieten eine Vielzahl von Charts. Zum Beispiel, Liniendiagramme, Spline Diagramme, Flächendiagramme, Balkendiagramme, Kreisdiagramme und so weiter.

Dieses Tutorial führt Sie Grundlagen der Google Charts lehren. Tutorial enthält Kapitel diskutieren alle grundlegenden Komponenten von Google Charts mit geeigneten Beispielen.


Publikum

Dieses Tutorial ist für Software-Profis, die bereit sind, Google Charts in wenigen einfachen Schritten zu lernen. Dieses Tutorial werden Ihnen viel Verständnis auf Google Charts Konzepte und nach Abschluss dieses Lernprogramms Sie auf mittlerer Ebene von experties aus sein werden, wo man sich auf einem höheren Niveau von Know-how nutzen.


Voraussetzungen

Bevor Sie mit diesem Tutorial fortfahren sollten Sie ein grundlegendes Verständnis von JavaScript haben, HTML, CSS und einen beliebigen Texteditor.


Testen Sie Google Charts Online

Für die meisten der in diesem Tutorial angegebenen Beispiele finden Sie Try it Option, so dass nur von dieser Möglichkeit Gebrauch machen Ihre Programme an Ort und Stelle durchführen und das Lernen genießen.

Versuchen Sie beispielsweise folgende using Try it Option in der oberen rechten Ecke des unter Beispiel - Code - Box -

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