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 แผนภูมิเส้นแนวโน้มพหุนาม

แผนภูมิเส้นแนวโน้มพหุนาม