Google Charts - คู่มือฉบับย่อ
Google Chartsเป็นไลบรารีการสร้างแผนภูมิแบบ JavaScript ที่มีวัตถุประสงค์เพื่อปรับปรุงเว็บแอปพลิเคชันโดยเพิ่มความสามารถในการสร้างแผนภูมิแบบโต้ตอบ รองรับแผนภูมิที่หลากหลาย แผนภูมิถูกวาดโดยใช้ SVG ในเบราว์เซอร์มาตรฐานเช่น Chrome, Firefox, Safari, Internet Explorer (IE) ใน IE 6 แบบเดิม VML จะใช้ในการวาดกราฟิก
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติเด่นของห้องสมุด Google Charts
Compatability - ใช้งานได้กับเบราว์เซอร์และแพลตฟอร์มมือถือหลัก ๆ ทั้งหมดเช่น Android และ iOS
Multitouch Support- รองรับมัลติทัชบนแพลตฟอร์มที่ใช้หน้าจอสัมผัสเช่น Android และ iOS เหมาะสำหรับ iPhone / iPad และสมาร์ทโฟน / แท็บเล็ตที่ใช้ Android
Free to Use - โอเพ่นซอร์สและใช้งานได้ฟรีเพื่อจุดประสงค์ที่ไม่ใช่เชิงพาณิชย์
Lightweight - ไลบรารีหลัก loader.js เป็นไลบรารีที่มีน้ำหนักเบามาก
Simple Configurations - ใช้ json เพื่อกำหนดการกำหนดค่าต่างๆของแผนภูมิและง่ายต่อการเรียนรู้และใช้งาน
Dynamic - อนุญาตให้แก้ไขแผนภูมิแม้หลังจากสร้างแผนภูมิแล้ว
Multiple axes- ไม่ จำกัด เฉพาะแกน x, y รองรับหลายแกนบนแผนภูมิ
Configurable tooltips- Tooltip เกิดขึ้นเมื่อผู้ใช้วางเมาส์เหนือจุดใด ๆ บนแผนภูมิ googlecharts มีคำแนะนำเครื่องมือในตัวจัดรูปแบบหรือตัวจัดรูปแบบการเรียกกลับเพื่อควบคุมคำแนะนำเครื่องมือโดยทางโปรแกรม
DateTime support- จัดการวันเวลาเป็นพิเศษ ให้การควบคุม inbuilt มากมายในหมวดหมู่ที่ชาญฉลาดวันที่
Print - พิมพ์แผนภูมิโดยใช้หน้าเว็บ
External data- รองรับการโหลดข้อมูลแบบไดนามิกจากเซิร์ฟเวอร์ ให้การควบคุมข้อมูลโดยใช้ฟังก์ชันการโทรกลับ
Text Rotation - รองรับการหมุนฉลากในทิศทางใดก็ได้
ประเภทแผนภูมิที่รองรับ
ห้องสมุด Google Charts มีแผนภูมิประเภทต่อไปนี้ -
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | Line Charts ใช้ในการวาดแผนภูมิตามเส้น / เส้นโค้ง |
| 2 | Area Charts ใช้เพื่อวาดแผนภูมิพื้นที่ที่ชาญฉลาด |
| 3 | Pie Charts ใช้ในการวาดแผนภูมิวงกลม |
| 4 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines ใช้เพื่อวาดแผนภูมิที่กระจัดกระจาย |
| 5 | Bubble Charts ใช้เพื่อวาดแผนภูมิฟอง |
| 6 | Dynamic Charts ใช้เพื่อวาดแผนภูมิแบบไดนามิกที่ผู้ใช้สามารถแก้ไขแผนภูมิได้ |
| 7 | Combinations ใช้เพื่อวาดการรวมกันของแผนภูมิต่างๆ |
| 8 | 3D Charts ใช้เพื่อวาดแผนภูมิ 3 มิติ |
| 9 | Angular Gauges ใช้ในการวาดแผนภูมิประเภทมาตรวัดความเร็ว |
| 10 | Heat Maps ใช้ในการวาดแผนที่ความร้อน |
| 11 | Tree Maps ใช้ในการวาดแผนที่ต้นไม้ |
ในบทต่อไปเราจะพูดถึงแผนภูมิแต่ละประเภทที่กล่าวถึงข้างต้นโดยละเอียดพร้อมตัวอย่าง
ใบอนุญาต
Google Charts เป็นโอเพ่นซอร์สและใช้งานได้ฟรี ตามลิงค์: เงื่อนไขการให้บริการ
ในบทนี้เราจะพูดถึงวิธีการตั้งค่าไลบรารี Google Charts เพื่อใช้ในการพัฒนาเว็บแอปพลิเคชัน
ติดตั้ง Google Charts
มีสองวิธีในการใช้ Google Charts
Download - ดาวน์โหลดในเครื่องจาก https://developers.google.com/chart และใช้มัน
CDN access- คุณยังสามารถเข้าถึง CDN CDN จะช่วยให้คุณสามารถเข้าถึงศูนย์ข้อมูลระดับภูมิภาคได้ทั่วโลกซึ่งในกรณีนี้โฮสต์ของ Google Charthttps://www.gstatic.com/charts.
ใช้ Google Chart ที่ดาวน์โหลด
รวมไฟล์ Googlecharts JavaScript ในหน้า HTML โดยใช้สคริปต์ต่อไปนี้ -
<head>
<script src = "/googlecharts/loader.js"></script>
</head>ใช้ CDN
เรากำลังใช้ไลบรารี Google Chart เวอร์ชัน CDN ตลอดบทช่วยสอนนี้
รวมไฟล์ Google Chart JavaScript ในหน้า HTML โดยใช้สคริปต์ต่อไปนี้ -
<head>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>ในบทนี้เราจะแสดงการกำหนดค่าที่จำเป็นในการวาดแผนภูมิโดยใช้ Google Chart API
ขั้นตอนที่ 1: สร้างเพจ HTML
สร้างหน้า HTML ด้วยห้องสมุด Google Chart
googlecharts_configuration.htm
<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>
</body>
</html>ที่นี่ containerdiv ใช้เพื่อบรรจุแผนภูมิที่วาดโดยใช้ Google Chart library ที่นี่เรากำลังโหลด corecharts API เวอร์ชันล่าสุดโดยใช้วิธี google.charts.load
ขั้นตอนที่ 2: สร้างการกำหนดค่า
ห้องสมุด Google Chart ใช้การกำหนดค่าที่เรียบง่ายโดยใช้ไวยากรณ์ json
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);ข้อมูลในที่นี้แสดงถึงข้อมูล json และตัวเลือกแสดงถึงการกำหนดค่าที่ไลบรารี Google Chart ใช้ในการวาดแผนภูมิโดยใช้คอนเทนเนอร์ div โดยใช้วิธี draw () ตอนนี้เราจะกำหนดค่าพารามิเตอร์ต่างๆเพื่อสร้างสตริง json ที่ต้องการ
หัวข้อ
กำหนดค่าตัวเลือกของแผนภูมิ
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};ตารางข้อมูล
กำหนดค่าข้อมูลที่จะแสดงบนแผนภูมิ DataTable คือคอลเลกชันที่มีโครงสร้างตารางพิเศษซึ่งมีข้อมูลของแผนภูมิ คอลัมน์ของตารางข้อมูลแสดงถึงตำนานและแถวแสดงถึงข้อมูลที่เกี่ยวข้อง addColumn () วิธีการใช้เพื่อเพิ่มคอลัมน์โดยที่พารามิเตอร์แรกแสดงถึงชนิดข้อมูลและพารามิเตอร์ที่สองแสดงถึงคำอธิบายแผนภูมิ addRows () วิธีการใช้เพื่อเพิ่มแถวตามลำดับ
// 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]
]);ขั้นตอนที่ 3: วาดแผนภูมิ
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างที่สมบูรณ์ -
googlecharts_configuration.htm
<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>การเรียกใช้รหัสต่อไปนี้ฟังก์ชัน drawChart เพื่อวาดแผนภูมิเมื่อไลบรารี Google Chart โหลดเสร็จสมบูรณ์
google.charts.setOnLoadCallback(drawChart);ผลลัพธ์
ตรวจสอบผลลัพธ์
แผนภูมิพื้นที่ใช้เพื่อวาดแผนภูมิตามพื้นที่ ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามพื้นที่ดังต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | พื้นที่พื้นฐาน แผนภูมิพื้นที่พื้นฐาน |
| 2 | พื้นที่ที่มีค่าลบ แผนภูมิพื้นที่มีค่าเป็นลบ |
| 3 | พื้นที่ที่ซ้อนกัน แผนภูมิที่มีพื้นที่ซ้อนทับกัน |
| 4 | พื้นที่เปอร์เซ็นต์ จัดทำแผนภูมิด้วยข้อมูลในรูปเปอร์เซ็นต์ |
| 5 | พื้นที่ที่มีจุดที่ขาดหายไป แผนภูมิที่มีจุดที่ขาดหายไปในข้อมูล |
| 6 | แกนกลับด้าน พื้นที่โดยใช้แกนกลับด้าน |
แผนภูมิแท่งใช้เพื่อวาดแผนภูมิแบบแท่ง ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิแท่งดังต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | เบสิคบาร์ แผนภูมิแท่งพื้นฐาน |
| 2 | แผนภูมิแท่งที่จัดกลุ่ม แผนภูมิแท่งที่จัดกลุ่ม |
| 3 | บาร์ซ้อน แผนภูมิแท่งที่มีแถบซ้อนทับกัน |
| 4 | แถบซ้อนเชิงลบ แผนภูมิแท่งที่มีสแต็กลบ |
| 5 | แถบเปอร์เซ็นต์แบบเรียงซ้อน แผนภูมิแท่งที่มีข้อมูลเป็นเปอร์เซ็นต์ |
| 6 | แผนภูมิแท่งวัสดุ แผนภูมิแท่งแรงบันดาลใจจากดีไซน์ Material |
| 7 | แผนภูมิแท่งพร้อมป้ายกำกับข้อมูล แผนภูมิแท่งพร้อมป้ายกำกับข้อมูล |
แผนภูมิฟองใช้เพื่อวาดแผนภูมิแบบฟอง ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิแบบฟองต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | ฟองพื้นฐาน แผนภูมิฟองพื้นฐาน |
| 2 | แผนภูมิฟองพร้อมป้ายกำกับข้อมูล แผนภูมิฟองพร้อมป้ายกำกับข้อมูล |
แผนภูมิปฏิทินใช้เพื่อวาดกิจกรรมในช่วงเวลาที่ยาวนานเช่นเดือนหรือปี ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามปฏิทินต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | ปฏิทินพื้นฐาน แผนภูมิปฏิทินพื้นฐาน |
| 2 | ปฏิทินพร้อมสีที่กำหนดเอง แผนภูมิปฏิทินที่กำหนดเอง |
แผนภูมิแท่งเทียนใช้เพื่อแสดงมูลค่าเปิดและปิดเหนือความแปรปรวนของมูลค่าและโดยปกติจะใช้เพื่อแสดงหุ้น ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิแท่งเทียนต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | เชิงเทียนพื้นฐาน แผนภูมิแท่งเทียนพื้นฐาน |
| 2 | เชิงเทียนพร้อมสีที่กำหนดเอง แผนภูมิแท่งเทียนที่กำหนดเอง |
แผนภูมิคอลัมน์ใช้เพื่อวาดแผนภูมิตามคอลัมน์ ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามคอลัมน์ต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | คอลัมน์พื้นฐาน แผนภูมิคอลัมน์พื้นฐาน |
| 2 | คอลัมน์ที่จัดกลุ่ม แผนภูมิคอลัมน์ที่จัดกลุ่ม |
| 3 | คอลัมน์แบบเรียงซ้อน แผนภูมิคอลัมน์ที่มีคอลัมน์ซ้อนทับกัน |
| 4 | คอลัมน์ที่ซ้อนกันเชิงลบ แผนภูมิคอลัมน์ที่มีสแต็กลบ |
| 5 | คอลัมน์ที่ซ้อนกันเป็นเปอร์เซ็นต์ แผนภูมิคอลัมน์ที่มีข้อมูลเป็นเปอร์เซ็นต์ |
| 6 | แผนภูมิคอลัมน์วัสดุ แผนภูมิคอลัมน์ที่ได้รับแรงบันดาลใจจากดีไซน์ Material |
| 7 | แผนภูมิคอลัมน์พร้อมป้ายกำกับข้อมูล แผนภูมิคอลัมน์พร้อมป้ายกำกับข้อมูล |
แผนภูมิผสมช่วยในการแสดงผลแต่ละชุดเป็นประเภทเครื่องหมายที่แตกต่างกันจากรายการต่อไปนี้: เส้นพื้นที่แท่งเชิงเทียนและพื้นที่ขั้นบันได ในการกำหนดประเภทเครื่องหมายเริ่มต้นสำหรับชุดข้อมูลให้ใช้คุณสมบัติ seriesType คุณสมบัติ Series ถูกใช้เพื่อระบุคุณสมบัติของแต่ละซีรีส์ทีละรายการ เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมินี้แล้วในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Google ลองดูตัวอย่างทั้งหมด
การกำหนดค่า
เราเคยใช้ ComboChart คลาสเพื่อแสดงแผนภูมิตามชุดค่าผสม
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));ตัวอย่าง
googlecharts_combination_chart.htm
<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 = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
ฮิสโตแกรมคือแผนภูมิที่จัดกลุ่มข้อมูลตัวเลขลงในที่เก็บข้อมูลโดยแสดงที่เก็บข้อมูลเป็นคอลัมน์ที่แบ่งกลุ่ม ใช้เพื่ออธิบายการกระจายของชุดข้อมูลว่าค่าต่างๆอยู่ในช่วงบ่อยเพียงใด Google Charts จะเลือกจำนวนที่เก็บข้อมูลให้คุณโดยอัตโนมัติ ที่เก็บข้อมูลทั้งหมดมีความกว้างเท่ากันและมีความสูงเป็นสัดส่วนกับจำนวนจุดข้อมูลในที่เก็บข้อมูล ฮิสโตแกรมคล้ายกับแผนภูมิคอลัมน์ในแง่มุมอื่น ๆ ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามฮิสโตแกรมต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | ฮิสโตแกรมพื้นฐาน แผนภูมิฮิสโตแกรมพื้นฐาน |
| 2 | การควบคุมสี สีที่กำหนดเองของแผนภูมิ Histrogram |
| 3 | การควบคุมที่เก็บข้อมูล ถังที่กำหนดเองของแผนภูมิ Histrogram |
| 4 | หลายซีรีส์ แผนภูมิ Histrogram มีหลายชุด |
แผนภูมิเส้นใช้เพื่อวาดแผนภูมิตามเส้น ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามเส้นต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | เส้นพื้นฐาน แผนภูมิเส้นพื้นฐาน |
| 2 | มีจุดที่มองเห็นได้ แผนภูมิที่มีจุดข้อมูลที่มองเห็นได้ |
| 3 | สีพื้นหลังที่ปรับแต่งได้ แผนภูมิด้วยสีพื้นหลังที่กำหนดเอง |
| 4 | สีของเส้นที่ปรับแต่งได้ แผนภูมิด้วยสีเส้นที่กำหนดเอง |
| 5 | แกนที่ปรับแต่งได้และป้ายกำกับ จัดทำแผนภูมิด้วยแกนที่กำหนดเองและป้ายกำกับ |
| 6 | กากบาท แผนภูมิเส้นแสดงกากบาทที่จุดข้อมูลบนการเลือก |
| 7 | สไตล์เส้นที่ปรับแต่งได้ แผนภูมิด้วยสีเส้นที่กำหนดเอง |
| 8 | แผนภูมิเส้นที่มีเส้นโค้ง แผนภูมิด้วยเส้นโค้งเรียบ |
| 9 | แผนภูมิเส้นวัสดุ แผนภูมิเส้นที่ได้รับแรงบันดาลใจจากดีไซน์ Material |
| 10 | แผนภูมิเส้น X ยอดนิยม แผนภูมิเส้นที่ได้แรงบันดาลใจจากการออกแบบวัสดุโดยมีแกน X อยู่ด้านบนของแผนภูมิ |
Google Map Chart ใช้ Google Maps API เพื่อแสดงแผนที่ ค่าข้อมูลจะแสดงเป็นเครื่องหมายบนแผนที่ ค่าข้อมูลอาจเป็นพิกัด (คู่ละยาว) หรือแอดเดรสจริง แผนที่จะถูกปรับขนาดตามเพื่อให้รวมจุดที่ระบุไว้ทั้งหมด
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | แผนที่พื้นฐาน แผนที่ Google พื้นฐาน |
| 2 | แผนที่โดยใช้ละติจูด / ลองจิจูด แผนที่ที่มีการระบุตำแหน่งโดยใช้ละติจูดและลองจิจูด |
| 3 | การปรับแต่งเครื่องหมาย เครื่องหมายที่กำหนดเองในแผนที่ |
แผนผังองค์กรช่วยในการแสดงลำดับชั้นของโหนดซึ่งใช้เพื่อแสดงภาพความสัมพันธ์ที่เหนือกว่า / รองลงมาในองค์กร ตัวอย่างเช่นแผนผังครอบครัวคือแผนผังองค์กรประเภทหนึ่ง .. เราได้เห็นการกำหนดค่าที่ใช้วาดแผนภูมินี้แล้วในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Google ลองดูตัวอย่างทั้งหมด
การกำหนดค่า
เราเคยใช้ OrgChart คลาสเพื่อแสดงแผนผังองค์กร
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));ตัวอย่าง
googlecharts_organization_chart.htm
<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: ['orgchart']});
</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', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
แผนภูมิวงกลมใช้เพื่อวาดแผนภูมิวงกลม ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิวงกลมต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | พายพื้นฐาน แผนภูมิวงกลมพื้นฐาน |
| 2 | แผนภูมิโดนัท แผนภูมิโดนัท. |
| 3 | แผนภูมิวงกลม 3 มิติ แผนภูมิวงกลม 3 มิติ |
| 4 | แผนภูมิวงกลมที่มีชิ้นส่วนระเบิด แผนภูมิวงกลมที่มีชิ้นส่วนระเบิด |
แผนภูมิ sankey เป็นเครื่องมือในการแสดงภาพและใช้เพื่อแสดงการไหลจากชุดค่าหนึ่งไปยังอีกชุดหนึ่ง อ็อบเจ็กต์ที่เชื่อมต่อเรียกว่าโหนดและการเชื่อมต่อเรียกว่าลิงค์ Sankeys ใช้เพื่อแสดงการทำแผนที่แบบกลุ่มต่อกลุ่มระหว่างสองโดเมนหรือหลายเส้นทางผ่านชุดของขั้นตอน
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | แผนภูมิ Sankey พื้นฐาน แผนภูมิ Sankey พื้นฐาน |
| 2 | แผนภูมิ Sankey หลายระดับ แผนภูมิ Sankey หลายระดับ |
| 3 | การปรับแต่งแผนภูมิ Sankey แผนภูมิ Sankey ที่กำหนดเอง |
Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines ใช้ในการวาดแผนภูมิตามการกระจาย ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามการกระจายต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | การกระจายพื้นฐาน แผนภูมิกระจายพื้นฐาน |
| 2 | แผนภูมิการกระจายวัสดุ แผนภูมิการกระจายวัสดุ |
| 3 | แผนภูมิกระจายแกน Y คู่ แผนภูมิกระจายวัสดุที่มีแกน Y คู่ |
| 4 | แผนภูมิกระจายแกน X สูงสุด แผนภูมิกระจายวัสดุที่มีแกน X อยู่ด้านบน |
แผนภูมิพื้นที่แบบขั้นบันไดคือแผนภูมิพื้นที่แบบขั้นบันได เราจะพูดถึงประเภทของแผนภูมิพื้นที่แบบขั้นบันไดต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | แผนภูมิขั้นพื้นฐาน แผนภูมิพื้นที่ขั้นพื้นฐาน |
| 2 | แผนภูมิขั้นตอนที่ซ้อนกัน แผนภูมิพื้นที่ขั้นบันไดแบบเรียงซ้อน |
| 3 | แผนภูมิ Stepped แบบเรียงซ้อน 100% แผนภูมิพื้นที่ Stepped แบบเรียงซ้อน 100% |
แผนภูมิตารางช่วยในการแสดงผลตารางซึ่งสามารถจัดเรียงและเพจได้ เซลล์ตารางสามารถจัดรูปแบบโดยใช้สตริงรูปแบบหรือโดยการแทรก HTML โดยตรงเป็นค่าของเซลล์ ค่าตัวเลขจัดชิดขวาตามค่าเริ่มต้น ค่าบูลีนจะแสดงเป็นเครื่องหมายถูกหรือเครื่องหมายกากบาท ผู้ใช้สามารถเลือกแถวเดียวด้วยแป้นพิมพ์หรือเมาส์ สามารถใช้ส่วนหัวคอลัมน์สำหรับการเรียงลำดับ แถวส่วนหัวยังคงแก้ไขระหว่างการเลื่อน ตารางเริ่มการทำงานของเหตุการณ์ที่เกี่ยวข้องกับการโต้ตอบของผู้ใช้ เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมินี้แล้วในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Google ลองดูตัวอย่างทั้งหมด
การกำหนดค่า
เราเคยใช้ Table คลาสเพื่อแสดงแผนภูมิตามตาราง
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));ตัวอย่าง
googlecharts_table_chart.htm
<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: ['table']});
</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', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
// Instantiate and draw the chart.
var chart = new google.visualization.Table(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
ไทม์ไลน์แสดงถึงการใช้ทรัพยากรชุดหนึ่งในช่วงเวลาหนึ่ง เราจะพูดถึงประเภทของแผนภูมิไทม์ไลน์ต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิ / คำอธิบาย |
|---|---|
| 1 | แผนภูมิเส้นเวลาพื้นฐาน แผนภูมิเส้นเวลาพื้นฐาน |
| 2 | ไทม์ไลน์แผนภูมิที่มีป้ายกำกับข้อมูล ไทม์ไลน์แผนภูมิที่มีป้ายกำกับข้อมูล |
| 3 | แผนภูมิไทม์ไลน์ที่ไม่มีป้ายชื่อแถว แผนภูมิไทม์ไลน์ที่ไม่มีป้ายชื่อแถว |
| 4 | การระบายสีแผนภูมิไทม์ไลน์ แผนภูมิไทม์ไลน์ที่กำหนดเอง |
TreeMap เป็นการแสดงภาพของแผนผังข้อมูลโดยที่แต่ละโหนดอาจมีเด็กเป็นศูนย์หรือมากกว่าและมีพาเรนต์หนึ่งตัว (ยกเว้นรูท) แต่ละโหนดจะแสดงเป็นสี่เหลี่ยมผืนผ้าสามารถกำหนดขนาดและสีได้ตามค่าที่เรากำหนด ขนาดและสีมีมูลค่าเทียบกับโหนดอื่น ๆ ทั้งหมดในกราฟ ต่อไปนี้เป็นตัวอย่างของแผนภูมิทรีแมป เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมินี้แล้วในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Google ลองดูตัวอย่างทั้งหมด
การกำหนดค่า
เราเคยใช้ TreeMap คลาสเพื่อแสดงแผนภาพทรีแมป
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));ตัวอย่าง
googlecharts_treemap.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript" src = "https://www.google.com/jsapi">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['treemap']});
</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();
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Egypt', 'Africa', 21, 0],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
};
// Instantiate and draw the chart.
var chart = new google.visualization.TreeMap(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
เส้นแนวโน้มคือเส้นที่ซ้อนทับบนแผนภูมิเพื่อแสดงทิศทางโดยรวมของข้อมูล Google Charts สามารถสร้างเส้นแนวโน้มโดยอัตโนมัติสำหรับ Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines, Bar Charts, Column Charts และ Line Charts .. เราจะพูดถึงประเภทของแผนภูมิเส้นแนวโน้มต่อไปนี้
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | แผนภูมิเส้นแนวโน้มพื้นฐาน แผนภูมิเส้นแนวโน้มพื้นฐาน |
| 2 | แผนภูมิเส้นแนวโน้มเอกซ์โปเนนเชียล แผนภูมิเส้นแนวโน้มเอกซ์โปเนนเชียล |
| 3 | แผนภูมิเส้นแนวโน้มพหุนาม แผนภูมิเส้นแนวโน้มพหุนาม |