JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


Google Chart

ตั้งแต่แผนภูมิเส้นอย่างง่ายไปจนถึงแผนที่ต้นไม้แบบลำดับชั้นที่ซับซ้อน แกลเลอรี Google Chart มีแผนภูมิประเภทพร้อมใช้งานจำนวนมาก:

  • แผนภูมิกระจาย
  • แผนภูมิเส้น
  • แผนภูมิแท่ง / คอลัมน์
  • แผนภูมิพื้นที่
  • แผนภูมิวงกลม
  • แผนภูมิโดนัท
  • แผนผังองค์กร
  • แผนที่ / แผนภูมิภูมิศาสตร์

วิธีการใช้ Google Chart?

หากต้องการใช้ Google Chart ในหน้าเว็บของคุณ ให้เพิ่มลิงก์ไปยังตัวโหลดแผนภูมิ:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

Google Chart ใช้งานง่าย

เพียงเพิ่ม<div>องค์ประกอบเพื่อแสดงแผนภูมิ:

<div id="myChart" style="max-width:700px; height:400px"></div>

<div> องค์ประกอบต้องมีรหัสที่ไม่ซ้ำกัน

จากนั้นโหลด Google Graph API:

  1. โหลด Visualization API และแพ็คเกจ corechart
  2. ตั้งค่าฟังก์ชันเรียกกลับให้โทรเมื่อโหลด API
1 google.charts.load('current',{packages:['corechart']});

2 google.charts.setOnLoadCallback(drawChart);

นั่นคือทั้งหมด!


กราฟเส้น

House Prices vs. Size60801001201400.02.55.07.510.012.515.0Square MetersPrice in Millions
ราคาขนาด
507
608
708
809
909
1009
11010
12011
13014
14014
15015

รหัสแหล่งที่มา

function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
  ['Price', 'Size'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]);
// Set Options
var options = {
  title: 'House Prices vs Size',
  hAxis: {title: 'Square Meters'},
  vAxis: {title: 'Price in Millions'},
  legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}


พล็อตกระจาย

หากต้องการกระจายพล็อตข้อมูลเดียวกัน ให้เปลี่ยน google.visualization เป็น ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

House Prices vs. Size0501001500.02.55.07.510.012.515.0Square MetersPrice in Millions
ราคาขนาด
507
608
708
809
909
1009
11010
12011
13014
14014
15015

แผนภูมิแท่ง

World Wide Wine ProductionMhl0204060ItalyFranceSpainUSAArgentina
คอนทรีMhl
อิตาลี55
ฝรั่งเศส49
สเปน44
สหรัฐอเมริกา24
อาร์เจนตินา15

รหัสแหล่งที่มา

function drawChart() {

var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italy', 55],
  ['France', 49],
  ['Spain', 44],
  ['USA', 24],
  ['Argentina', 15]
]);

var options = {
  title: 'World Wide Wine Production'
};

var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);

}


แผนภูมิวงกลม

หากต้องการแปลง แผนภูมิ แท่งเป็น แผนภูมิ วงกลมเพียงแทนที่:

google.visualization BarChart

กับ:

google.visualization PieChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

World Wide Wine ProductionItalyFranceSpainUSAArgentina29.4%8%12.8%23.5%26.2%
คอนทรีMhl
อิตาลี55
ฝรั่งเศส49
สเปน44
สหรัฐอเมริกา24
อาร์เจนตินา15

พาย 3 มิติ

หากต้องการแสดงพายในแบบ 3 มิติ เพียงเพิ่มis3D: trueให้กับตัวเลือก:

var options = {
  title: 'World Wide Wine Production',
  is3D: true
};

World Wide Wine ProductionItalyFranceSpainUSAArgentina29.4%8%12.8%23.5%26.2%
คอนทรีMhl
อิตาลี55
ฝรั่งเศส49
สเปน44
สหรัฐอเมริกา24
อาร์เจนตินา15