論壇 | 最新的Web開發教程
 

谷歌圖表教程

❮ 上一頁下一章 ❯


谷歌圖表是指通過添加交互式圖表功能，以提高Web應用程序的一個純基於JavaScript的圖表庫。 谷歌圖表提供各種圖表。 例如，折線圖，樣條圖，區域圖，柱狀圖，餅圖等。

本教程將教你谷歌圖表的基礎知識。 教程包含的章節討論谷歌圖表的所有基本組件用合適的例子。

聽眾

本教程是專為軟件專業人員誰願意學習谷歌在圖表簡單輕鬆的步驟。 本教程將讓你在谷歌圖表概念和完成本教程中，您將在在那裡你可以把自己的專業知識在更高層次experties的中等水平後，非常理解。

先決條件

與之前繼續學習本教程，你應該了JavaScript，HTML，CSS和任何文本編輯器有基本的了解。

試用谷歌在線圖表

對於大多數在本教程中所舉的例子，你會發現試試看的選項，所以只要使用此選項在現場執行你的計劃，並享受你的學習。

嘗試使用試試看可在下面的示例代碼框的右上角的選項下面的例子- 

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

❮ 上一頁下一章 ❯