Forum | Neueste Web-Entwicklung Tutorials
 

Google Charts Tutorial



Google Charts ist eine reine JavaScript - basierte Charting - Bibliothek bedeutete Webanwendungen Fähigkeit durch Hinzufügen von interaktiven Charting zu verbessern. Google Charts bietet Vielzahl von Charts. Zum Beispiel, Liniendiagramme, Spline-Charts, 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 einfachen Schritten zu lernen. Dieses Tutorial wird Ihnen viel Verständnis auf Google Charts Konzepte und nach Abschluss dieses Lernprogramms Sie auf mittlerer Ebene von experties aus sein wird, 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 einem beliebigen Texteditor.


Testen Sie Google Charts Online

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

Versuchen Sie zB folgende es mit Versuchen 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>