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 - ดาวน์โหลดในเครื่องจาก highcharts.com และใช้งานได้

  • 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 แผนที่ต้นไม้ขนาดใหญ่

แผนที่ต้นไม้ขนาดใหญ่