Forum | Najnowsze tutoriale tworzenie stron internetowych
 

Google Wykresy Tutorial



Wykresy Google to czysta oparte JavaScript biblioteki wykresów ma na celu zwiększenie aplikacji internetowych przez dodawanie interaktywnych możliwości tworzenia wykresów.Wykresy Google zapewnia szeroki wybór wykresów. Na przykład, wykresy liniowe, spline wykresy, mapy okolicy, wykresy słupkowe, wykresy kołowe i tak dalej.

Ten poradnik nauczy Cię podstaw Charts Google. Tutorial zawiera rozdziały poruszające wszystkie podstawowe składniki Google Charts z odpowiednimi przykładami.


Publiczność

Ten poradnik jest przeznaczony dla specjalistów od oprogramowania, którzy chcą nauczyć się wykresy Google w kilku prostych krokach. Ten poradnik daje wielkie zrozumienie w Google Charts koncepcji i po ukończeniu tego kursu będziesz na poziomie średniozaawansowanym experties skąd można wziąć pod uwagę przy wyższym poziomie doświadczenia.


Wymagania

Przed przystąpieniem do tego kursu powinien posiadać podstawową wiedzę na temat JavaScript, HTML, CSS i dowolnym edytorze tekstowym.


Spróbuj wykresy Google Online

Dla większości z przykładów podanych w niniejszym poradniku znajdzieszWypróbuj już opcji, więc po prostu skorzystać z tej opcji, aby wykonać swoje programy na miejscu i cieszyć się swoją naukę.

Spróbuj za pomocą następującego przykładuWypróbuj opcję dostępną w prawym górnym rogu okna Przykładowy kod poniżej -

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