Highcharts - คู่มือฉบับย่อ
Highchartsเป็นไลบรารีการสร้างแผนภูมิแบบ JavaScript ที่มีวัตถุประสงค์เพื่อปรับปรุงเว็บแอปพลิเคชันโดยเพิ่มความสามารถในการสร้างแผนภูมิแบบโต้ตอบ รองรับแผนภูมิที่หลากหลาย แผนภูมิถูกวาดโดยใช้ SVG ในเบราว์เซอร์มาตรฐานเช่น Chrome, Firefox, Safari, Internet Explorer (IE) ใน IE 6 แบบเดิม VML จะใช้ในการวาดกราฟิก
คุณสมบัติของห้องสมุด Highcharts
ตอนนี้ให้เราพูดถึงคุณสมบัติที่สำคัญบางประการของห้องสมุด Highcharts
Compatability - ใช้งานได้บนเบราว์เซอร์และแพลตฟอร์มมือถือหลัก ๆ ทั้งหมดเช่น Android และ iOS
Multitouch Support - รองรับมัลติทัชบนแพลตฟอร์มที่ใช้หน้าจอสัมผัสเช่น Android และ iOS เหมาะสำหรับ iPhone / iPad และสมาร์ทโฟน / แท็บเล็ตที่ใช้ Android
Free to Use - โอเพ่นซอร์สและใช้งานได้ฟรีเพื่อวัตถุประสงค์ที่ไม่ใช่เชิงพาณิชย์
Lightweight - ไลบรารีหลัก highcharts.js ที่มีขนาดเกือบ 35KB เป็นไลบรารีที่มีน้ำหนักเบามาก
Simple Configurations - ใช้ json เพื่อกำหนดการกำหนดค่าต่างๆของแผนภูมิและง่ายต่อการเรียนรู้และใช้งาน
Dynamic - อนุญาตให้แก้ไขแผนภูมิแม้หลังจากสร้างแผนภูมิแล้ว
Multiple axes- ไม่ จำกัด เฉพาะแกน x, y รองรับหลายแกนบนแผนภูมิ
Configurable tooltips- Tooltip เกิดขึ้นเมื่อผู้ใช้วางเมาส์เหนือจุดใด ๆ บนแผนภูมิ Highcharts ให้คำแนะนำเครื่องมือจัดรูปแบบ inbuilt หรือตัวจัดรูปแบบการเรียกกลับเพื่อควบคุมคำแนะนำเครื่องมือโดยทางโปรแกรม
DateTime support- จัดการวันเวลาเป็นพิเศษ ให้การควบคุม inbuilt มากมายในหมวดหมู่ที่ชาญฉลาดวันที่
Export - ส่งออกแผนภูมิเป็นรูปแบบ PDF / PNG / JPG / SVG โดยเปิดใช้งานคุณสมบัติการส่งออก
Print - พิมพ์แผนภูมิโดยใช้หน้าเว็บ
Zoomablity - รองรับแผนภูมิการซูมเพื่อดูข้อมูลอย่างแม่นยำยิ่งขึ้น
External data- รองรับการโหลดข้อมูลแบบไดนามิกจากเซิร์ฟเวอร์ ให้การควบคุมข้อมูลโดยใช้ฟังก์ชันการโทรกลับ
Text Rotation - รองรับการหมุนฉลากในทิศทางใดก็ได้
ประเภทแผนภูมิที่รองรับ
ห้องสมุด Highcharts มีแผนภูมิประเภทต่อไปนี้ -
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | Line Charts ใช้ในการวาดแผนภูมิตามเส้น / เส้นโค้ง |
| 2 | Area Charts ใช้เพื่อวาดแผนภูมิพื้นที่ที่ชาญฉลาด |
| 3 | Pie Charts ใช้ในการวาดแผนภูมิวงกลม |
| 4 | Scatter Charts ใช้เพื่อวาดแผนภูมิที่กระจัดกระจาย |
| 5 | Bubble Charts ใช้เพื่อวาดแผนภูมิฟอง |
| 6 | Dynamic Charts ใช้เพื่อวาดแผนภูมิแบบไดนามิกที่ผู้ใช้สามารถแก้ไขแผนภูมิได้ |
| 7 | Combinations ใช้เพื่อวาดการรวมกันของแผนภูมิต่างๆ |
| 8 | 3D Charts ใช้เพื่อวาดแผนภูมิ 3 มิติ |
| 9 | Angular Gauges ใช้ในการวาดแผนภูมิประเภทมาตรวัดความเร็ว |
| 10 | Heat Maps ใช้ในการวาดแผนที่ความร้อน |
| 11 | Tree Maps ใช้ในการวาดแผนที่ต้นไม้ |
ในบทต่อ ๆ ไปเราจะพูดถึงแผนภูมิที่กล่าวถึงข้างต้นแต่ละประเภทโดยละเอียดพร้อมตัวอย่าง
ใบอนุญาต
Highcharts เป็นโอเพ่นซอร์สและใช้งานได้ฟรีเพื่อวัตถุประสงค์ที่ไม่ใช่เชิงพาณิชย์ หากต้องการใช้ Highcharts ในโครงการเชิงพาณิชย์ให้ไปที่ลิงค์ - ใบอนุญาตและราคา
ในบทนี้จะกล่าวถึงวิธีการตั้งค่าไลบรารี Highcharts เพื่อใช้ในการพัฒนาเว็บแอปพลิเคชัน
Highcharts ต้องการ jQuery เป็นการอ้างอิง ขั้นแรกเราจะติดตั้งไลบรารี jQuery และไลบรารี Highcharts
ติดตั้ง jQuery
มีสองวิธีในการใช้ jQuery
Download- ดาวน์โหลดในเครื่องจากjQuery.comและใช้งานได้
CDN access- คุณยังสามารถเข้าถึง CDN CDN จะช่วยให้คุณสามารถเข้าถึงศูนย์ข้อมูลระดับภูมิภาคได้ทั่วโลก ในกรณีนี้โฮสต์ของ Google ซึ่งหมายความว่าการใช้ CDN จะย้ายความรับผิดชอบในการโฮสต์ไฟล์จากเซิร์ฟเวอร์ของคุณไปยังชุดไฟล์ภายนอก นอกจากนี้ยังมีข้อได้เปรียบที่ว่าหากผู้เยี่ยมชมหน้าเว็บของคุณได้ดาวน์โหลดสำเนาของ jQuery จาก CDN เดียวกันแล้วจะไม่ต้องดาวน์โหลดซ้ำ
ใช้ดาวน์โหลด jQuery
รวมไฟล์ jQuery JavaScript ในเพจ HTML โดยใช้สคริปต์ต่อไปนี้ -
<head>
<script src = "/jquery/jquery.min.js"></script>
</head>ใช้ CDN
เรากำลังใช้ไลบรารี jQuery เวอร์ชัน CDN ตลอดบทช่วยสอนนี้
รวมไฟล์ jQuery JavaScript ในเพจ HTML โดยใช้สคริปต์ต่อไปนี้ -
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>ติดตั้ง Highcharts
ต่อไปนี้เป็นสองวิธีในการใช้ Highcharts
Download - ดาวน์โหลดในเครื่องจาก
CDN access- คุณยังสามารถเข้าถึง CDN CDN จะช่วยให้คุณสามารถเข้าถึงศูนย์ข้อมูลระดับภูมิภาคได้ทั่วโลก ในกรณีนี้โฮสต์ Highcharts - Code.Highcharts.Com
การใช้ Highcharts ที่ดาวน์โหลด
รวมไฟล์ Highcharts JavaScript ในเพจ HTML โดยใช้สคริปต์ต่อไปนี้ -
<head>
<script src = "/highcharts/highcharts.js"></script>
</head>ใช้ CDN
เรากำลังใช้ไลบรารี Highcharts เวอร์ชัน CDN ตลอดบทช่วยสอนนี้
รวมไฟล์ Highcharts JavaScript ในเพจ HTML โดยใช้สคริปต์ต่อไปนี้ -
<head>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>ในบทนี้เราจะแสดงการกำหนดค่าที่จำเป็นในการวาดแผนภูมิโดยใช้ Highcharts API
ขั้นตอนที่ 1: สร้างเพจ HTML
สร้างเพจ HTML ด้วยไลบรารี่ jQuery และ Highcharts javascript
HighchartsTestHarness.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
});
</script>
</body>
</html>ที่นี่ container div ใช้เพื่อบรรจุแผนภูมิที่วาดโดยใช้ไลบรารี Highcharts
ขั้นตอนที่ 2: สร้างการกำหนดค่า
ไลบรารี Highcharts ใช้การกำหนดค่าที่เรียบง่ายโดยใช้ไวยากรณ์ json
$('#container').highcharts(json);ในที่นี้ json แสดงถึงข้อมูล json และคอนฟิกูเรชันซึ่งไลบรารี Highcharts ใช้เพื่อวาดแผนภูมิภายในคอนเทนเนอร์ div โดยใช้เมธอด highcharts () ตอนนี้เราจะกำหนดค่าพารามิเตอร์ต่างๆเพื่อสร้างสตริง json ที่ต้องการ
หัวข้อ
กำหนดค่าชื่อของแผนภูมิ
var title = {
text: 'Monthly Average Temperature'
};คำบรรยาย
กำหนดค่าคำบรรยายของแผนภูมิ
var subtitle = {
text: 'Source: WorldClimate.com'
};xAxis
กำหนดค่าทิกเกอร์ที่จะแสดงบนแกน X
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};yAxis
กำหนดค่าชื่อเรื่องเส้นพล็อตที่จะแสดงบนแกน Y
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};คำแนะนำเครื่องมือ
กำหนดค่าคำแนะนำเครื่องมือ ใส่คำต่อท้ายที่จะเพิ่มหลังค่า (แกน y)
var tooltip = {
valueSuffix: '\xB0C'
}ตำนาน
กำหนดค่าคำอธิบายแผนภูมิที่จะแสดงทางด้านขวาของแผนภูมิพร้อมกับคุณสมบัติอื่น ๆ
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};ชุด
กำหนดค่าข้อมูลที่จะแสดงบนแผนภูมิ Series คืออาร์เรย์ที่แต่ละองค์ประกอบของอาร์เรย์นี้แสดงถึงบรรทัดเดียวบนแผนภูมิ
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
];ขั้นตอนที่ 3: สร้างข้อมูล json
รวมการกำหนดค่าทั้งหมด
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;ขั้นตอนที่ 4: วาดแผนภูมิ
$('#container').highcharts(json);ตัวอย่าง
พิจารณาตัวอย่างต่อไปนี้เพื่อทำความเข้าใจไวยากรณ์การกำหนดค่าเพิ่มเติม -
highcharts_configuration.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
var title = {
text: 'Monthly Average Temperature'
};
var subtitle = {
text: 'Source: WorldClimate.com'
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>ผลลัพธ์
ตรวจสอบผลลัพธ์
แผนภูมิเส้นใช้เพื่อวาดแผนภูมิตามเส้น / เส้นโค้ง ในส่วนนี้เราจะพูดถึงแผนภูมิแบบเส้นและเส้นโค้งแบบต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | เส้นพื้นฐาน แผนภูมิเส้นพื้นฐาน |
| 2 | ด้วยป้ายกำกับข้อมูล จัดทำแผนภูมิด้วยป้ายกำกับข้อมูล |
| 3 | Ajax โหลดข้อมูลจุดที่คลิกได้ แผนภูมิที่วาดหลังจากดึงข้อมูลจากเซิร์ฟเวอร์ |
| 4 | อนุกรมเวลาซูมได้ จัดทำแผนภูมิด้วยอนุกรมเวลา |
| 5 | Spline กับแกนกลับด้าน แผนภูมิ Spline มีแกนกลับด้าน |
| 6 | Spline ด้วยสัญลักษณ์ Spline chart โดยใช้สัญลักษณ์สำหรับความร้อน / ฝน |
| 7 | Spline กับวงดนตรีพล็อต แผนภูมิ Spline พร้อมแถบพล็อต |
| 8 | ข้อมูลเวลาที่มีช่วงเวลาไม่สม่ำเสมอ แผนภูมิข้อมูลชุดใหญ่ตามเวลา |
| 9 | แกนลอการิทึม แผนภูมิแสดงแกนลอการิทึม |
แผนภูมิพื้นที่ใช้เพื่อวาดแผนภูมิตามพื้นที่ ในส่วนนี้เราจะพูดถึงประเภทต่างๆของแผนภูมิตามพื้นที่
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | พื้นที่พื้นฐาน แผนภูมิพื้นที่พื้นฐาน |
| 2 | พื้นที่ที่มีค่าลบ แผนภูมิพื้นที่มีค่าเป็นลบ |
| 3 | พื้นที่ที่ซ้อนกัน แผนภูมิที่มีพื้นที่ซ้อนทับกัน |
| 4 | พื้นที่เปอร์เซ็นต์ จัดทำแผนภูมิด้วยข้อมูลในรูปเปอร์เซ็นต์ |
| 5 | พื้นที่ที่มีจุดที่ขาดหายไป แผนภูมิที่มีจุดที่ขาดหายไปในข้อมูล |
| 6 | แกนกลับด้าน พื้นที่โดยใช้แกนกลับด้าน |
| 7 | พื้นที่ spline แผนภูมิพื้นที่โดยใช้ spline |
| 8 | ช่วงพื้นที่ แผนภูมิพื้นที่โดยใช้ช่วง |
| 9 | ช่วงพื้นที่และเส้น แผนภูมิพื้นที่โดยใช้ช่วงและเส้น |
แผนภูมิแท่งใช้เพื่อวาดแผนภูมิตามพื้นที่ ในส่วนนี้เราจะพูดถึงแผนภูมิแท่งประเภทต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | เบสิคบาร์ แผนภูมิแท่งพื้นฐาน |
| 2 | บาร์ซ้อน แผนภูมิแท่งที่มีแถบซ้อนทับกัน |
| 3 | พื้นที่ซ้อนเชิงลบ แผนภูมิแท่งที่มีสแต็กลบ |
แผนภูมิคอลัมน์ใช้เพื่อวาดแผนภูมิตามคอลัมน์ ในส่วนนี้เราจะพูดถึงประเภทต่างๆของแผนภูมิตามคอลัมน์
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | คอลัมน์พื้นฐาน แผนภูมิคอลัมน์พื้นฐาน |
| 2 | คอลัมน์ที่มีค่าลบ แผนภูมิคอลัมน์มีค่าเป็นลบ |
| 3 | คอลัมน์ที่ซ้อนกัน แผนภูมิที่มีคอลัมน์ซ้อนกัน |
| 4 | คอลัมน์แบบเรียงซ้อนและจัดกลุ่ม แผนภูมิที่มีคอลัมน์ในรูปแบบเรียงซ้อนและจัดกลุ่ม |
| 5 | คอลัมน์ที่มีเปอร์เซ็นต์ซ้อนกัน แผนภูมิที่มีเปอร์เซ็นต์ซ้อนกัน |
| 6 | คอลัมน์ที่มีป้ายกำกับแบบหมุน แผนภูมิคอลัมน์พร้อมป้ายกำกับแบบหมุนในคอลัมน์ |
| 7 | คอลัมน์ที่มีการเจาะลึก แผนภูมิคอลัมน์พร้อมความสามารถในการเจาะลึก |
| 8 | คอลัมน์ที่มีตำแหน่งคงที่ แผนภูมิคอลัมน์ที่มีตำแหน่งคงที่ |
| 9 | ข้อมูลที่กำหนดในตาราง HTML แผนภูมิคอลัมน์โดยใช้ข้อมูลที่กำหนดในตาราง HTML |
| 10 | ช่วงคอลัมน์ แผนภูมิคอลัมน์โดยใช้ช่วง |
แผนภูมิวงกลมใช้เพื่อวาดแผนภูมิวงกลม ในส่วนนี้เราจะพูดถึงแผนภูมิวงกลมประเภทต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | พายพื้นฐาน แผนภูมิวงกลมพื้นฐาน |
| 2 | พายกับตำนาน แผนภูมิวงกลมกับ Legends |
| 3 | แผนภูมิโดนัท แผนภูมิโดนัท. |
| 4 | โดนัทครึ่งวงกลม แผนภูมิโดนัทครึ่งวงกลม |
| 5 | พายด้วยการเจาะลึก แผนภูมิวงกลมพร้อมความสามารถในการเจาะลึก |
| 6 | แผนภูมิวงกลมพร้อมการไล่ระดับสี แผนภูมิวงกลมพร้อมการไล่ระดับสี |
| 7 | แผนภูมิวงกลมด้วยขาวดำ แผนภูมิวงกลมพร้อมการเติมขาวดำ |
แผนภูมิกระจายใช้เพื่อวาดแผนภูมิตามการกระจาย ในส่วนนี้เราจะพูดถึงแผนภูมิที่ใช้การกระจายประเภทต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | แผนภูมิกระจาย แผนภูมิกระจาย |
แผนภูมิฟองใช้เพื่อวาดแผนภูมิแบบฟอง ในส่วนนี้เราจะพูดถึงแผนภูมิฟองสบู่ประเภทต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | แผนภูมิฟอง แผนภูมิฟอง |
| 2 | แผนภูมิ 3D Bubbles แผนภูมิ 3D Bubbles |
แผนภูมิแบบไดนามิกใช้ในการวาดแผนภูมิตามข้อมูลซึ่งข้อมูลสามารถเปลี่ยนแปลงได้หลังจากการแสดงผลแผนภูมิ ในส่วนนี้เราจะพูดถึงแผนภูมิไดนามิกประเภทต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | Spline อัปเดตทุกวินาที Spline Chart อัปเดตทุกวินาที |
| 2 | คลิกเพื่อเพิ่มจุด แผนภูมิที่มีความสามารถในการเพิ่มจุด |
แผนภูมิผสมใช้เพื่อวาดแผนภูมิแบบผสม ตัวอย่างเช่นแผนภูมิแท่งพร้อมแผนภูมิวงกลม ในส่วนนี้เราจะพูดถึงแผนภูมิชุดค่าผสมประเภทต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | คอลัมน์เส้นและพาย แผนภูมิด้วยคอลัมน์เส้นและวงกลม |
| 2 | แกนคู่เส้นและคอลัมน์ แผนภูมิด้วยแกนคู่เส้นและคอลัมน์ |
| 3 | หลายแกน แผนภูมิที่มีหลายแกน |
| 4 | กระจายด้วยเส้นถดถอย แผนภูมิกระจายพร้อมเส้นถดถอย |
แผนภูมิ 3 มิติใช้ในการวาดแผนภูมิ 3 มิติ ในส่วนนี้เราจะพูดถึงแผนภูมิ 3 มิติประเภทต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | คอลัมน์ 3D แผนภูมิคอลัมน์ 3 มิติ |
| 2 | คอลัมน์ 3 มิติที่มีค่าว่าง แผนภูมิคอลัมน์ 3 มิติที่มีค่า null และ 0 |
| 3 | คอลัมน์ 3 มิติพร้อมการซ้อน แผนภูมิคอลัมน์ 3 มิติพร้อมการซ้อนและการจัดกลุ่ม |
| 4 | 3D พาย แผนภูมิวงกลม 3 มิติ |
| 5 | 3D โดนัท แผนภูมิโดนัท 3 มิติ |
แผนภูมิ Angular Gauges ใช้ในการวาดแผนภูมิประเภทมิเตอร์ / มาตรวัด ในส่วนนี้เราจะพูดถึงแผนภูมิ Angular Gauges ประเภทต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | เกจเชิงมุม แผนภูมิเกจเชิงมุม |
| 2 | โซลิดเกจ แผนภูมิ Solid Gauge |
| 3 | นาฬิกา นาฬิกา. |
| 4 | มาตรวัดพร้อมแกนคู่ แผนภูมิมาตรวัดพร้อมแกนคู่ |
| 5 | VU Meter แผนภูมิ VU Meter |
แผนภูมิแผนที่ความร้อนใช้ในการวาดแผนภูมิประเภทแผนที่ความร้อน ในส่วนนี้เราจะพูดถึง Heat Maps ประเภทต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | แผนที่ความร้อน แผนที่ความร้อน |
| 2 | แผนที่ความร้อนขนาดใหญ่ แผนที่ความร้อนขนาดใหญ่ |
แผนภูมิแผนผังต้นไม้ใช้เพื่อวาดแผนภูมิประเภทแผนที่ต้นไม้ ในส่วนนี้เราจะพูดถึง Tree Maps ประเภทต่างๆ
| ซีเนียร์ | ประเภทแผนภูมิและคำอธิบาย |
|---|---|
| 1 | แผนที่ต้นไม้ แผนผังต้นไม้พร้อมแกนสี |
| 2 | แผนที่ต้นไม้ที่มีระดับ แผนที่ต้นไม้ที่มีระดับ |
| 3 | แผนที่ต้นไม้ขนาดใหญ่ แผนที่ต้นไม้ขนาดใหญ่ |