上一篇：没有了下一篇：Google图表概述

Google图表教程

Google图表是一个纯粹的基于JavaScript的图表库，旨在通过添加交互式制图功能来增强Web应用程序。Google图表提供多种图表。例如，折线图，样条曲线图，区域图表，条形图，饼图等。

本教程将向您介绍Google图表的基础知识。教程包含探讨Google图表的所有基本组件的章节，并提供适当的示例。

适合人员

本教程专为软件专业人士而设计，他们愿意通过简单而简单的步骤学习Google图表。本教程将为您深入了解Google图表概念，完成本教程后，您将获得中等水平的专业知识，从中获得更高水平的专业知识。

学习提醒

在进行本教程之前，您应该对JavaScript，html，css和任何文本编辑器有一个基本的了解。

尝试Google图表在线

对于本教程中给出的大多数示例，您将找到Try it选项，因此只需使用此选项即可在现场执行程序并享受学习。

尝试以下示例使用下面示例代码框右上角的Try it选项可用 -

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