ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Google แผนภูมิ เกี่ยวกับการสอน

Google แผนภูมิ หน้าหลัก Google แผนภูมิ ภาพรวม Google แผนภูมิ การตั้งค่าสภาพแวดล้อม Google แผนภูมิ การกำหนดค่าไวยากรณ์ Google แผนภูมิ ชาร์ตในพื้นที่ Google แผนภูมิ แผนภูมิแท่ง Google แผนภูมิ แผนภูมิฟอง Google แผนภูมิ ชาร์ตปฏิทิน Google แผนภูมิ แผนภูมิเชิงเทียน Google แผนภูมิ แผนภูมิคอลัมน์ Google แผนภูมิ แผนภูมิการรวมกัน Google แผนภูมิ แผนภูมิ histogram Google แผนภูมิ แผนภูมิเส้น Google แผนภูมิ แผนที่ Google แผนภูมิ แผนภูมิองค์กร Google แผนภูมิ แผนภูมิวงกลม Google แผนภูมิ ชาร์ตแซนคีย์ Google แผนภูมิ แผนภูมิกระจาย Google แผนภูมิ ก้าวแผนภูมิพื้นที่ Google แผนภูมิ แผนภูมิตาราง Google แผนภูมิ ชาร์ตไทม์ไลน์ Google แผนภูมิ แผนภูมิ TreeMap Google แผนภูมิ แผนภูมิเส้นแนวโน้ม Google แผนภูมิ คู่มือฉบับย่อ Google แผนภูมิ ทรัพยากรที่มีประโยชน์


 

สอน Google แผนภูมิ



Google แผนภูมิเป็นห้องสมุดสร้างแผนภูมิบริสุทธิ์ตาม JavaScript หมายถึงการเพิ่มประสิทธิภาพในการใช้งานเว็บโดยการเพิ่มความสามารถในการสร้างแผนภูมิแบบโต้ตอบ แผนภูมิ Google มีความหลากหลายของชาร์ต ยกตัวอย่างเช่นแผนภูมิเส้นแผนภูมิเส้นโค้งแผนภูมิพื้นที่แผนภูมิแท่งแผนภูมิวงกลมและอื่น ๆ

กวดวิชานี้จะสอนพื้นฐานของ Google แผนภูมิ กวดวิชาที่มีบทพูดคุยทุกองค์ประกอบพื้นฐานของ Google แผนภูมิด้วยตัวอย่างที่เหมาะสม


ผู้ชม

กวดวิชานี้ถูกออกแบบมาสำหรับผู้เชี่ยวชาญด้านซอฟแวร์ที่มีความเต็มใจที่จะเรียนรู้ Google แผนภูมิในขั้นตอนที่ง่ายและสะดวก กวดวิชานี้จะทำให้คุณมีความเข้าใจที่ดีเกี่ยวกับแนวคิด Google แผนภูมิและหลังจากเสร็จสิ้นการกวดวิชานี้คุณจะอยู่ในระดับกลางของ experties จากที่คุณสามารถเอาตัวเองอยู่ในระดับที่สูงขึ้นของความเชี่ยวชาญ


ข้อกำหนดเบื้องต้น

ก่อนที่จะดำเนินการกับการกวดวิชานี้คุณควรจะมีความเข้าใจพื้นฐานของ JavaScript, HTML, CSS และแก้ไขข้อความใด ๆ


ลองชาร์ตออนไลน์ของ Google

สำหรับส่วนของตัวอย่างที่กำหนดในการกวดวิชานี้คุณจะได้พบกับตัวเลือกลองดังนั้นเพียงแค่ใช้ประโยชน์จากตัวเลือกนี้จะรันโปรแกรมของคุณที่จุดและสนุกกับการเรียนรู้ของคุณ

ตัวอย่างต่อไปนี้ลองใช้ลองใช้ตัวเลือกที่มุมขวาบนของกล่องด้านล่างตัวอย่างรหัส -

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