แผนภูมิ Google เชิงมุม - คู่มือฉบับย่อ

Google Chartsเป็นไลบรารีการสร้างแผนภูมิแบบ JavaScript ที่มีวัตถุประสงค์เพื่อปรับปรุงเว็บแอปพลิเคชันโดยการเพิ่มความสามารถในการสร้างแผนภูมิแบบโต้ตอบ รองรับแผนภูมิที่หลากหลาย แผนภูมิถูกวาดโดยใช้ SVG ในเบราว์เซอร์มาตรฐานเช่น Chrome, Firefox, Safari, Internet Explorer (IE) ใน IE 6 แบบเดิม VML จะใช้ในการวาดกราฟิก

angular-google-chartsเป็นเครื่องห่อแบบเชิงมุมแบบโอเพนซอร์สสำหรับ Google Charts เพื่อให้การแสดงภาพแผนภูมิ Google ที่สวยงามและมีคุณสมบัติครบถ้วนภายในแอปพลิเคชันเชิงมุมและสามารถใช้ร่วมกับส่วนประกอบเชิงมุมได้อย่างราบรื่น มีบทที่กล่าวถึงองค์ประกอบพื้นฐานทั้งหมดของ Google Charts พร้อมด้วยตัวอย่างที่เหมาะสมภายในแอปพลิเคชัน Angular

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติเด่นของห้องสมุด 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 และ Angular Framework ในบทนี้เราจะพูดถึงการตั้งค่าสภาพแวดล้อมที่จำเป็นสำหรับ Angular 6 ในการติดตั้ง Angular 6 เราต้องการสิ่งต่อไปนี้ -

  • Nodejs
  • Npm
  • CLI เชิงมุม
  • IDE สำหรับเขียนโค้ดของคุณ

โหนดต้องมากกว่า 8.11 และ npm ต้องมากกว่า 5.6

โหนด

หากต้องการตรวจสอบว่ามีการติดตั้ง nodejs ในระบบของคุณหรือไม่ให้พิมพ์ node -vในเทอร์มินัล สิ่งนี้จะช่วยให้คุณเห็นเวอร์ชันของ nodejs ที่ติดตั้งในระบบของคุณในปัจจุบัน

C:\>node -v
v8.11.3

หากไม่พิมพ์อะไรเลยให้ติดตั้ง nodejs บนระบบของคุณ ในการติดตั้ง nodejs ให้ไปที่โฮมเพจhttps://nodejs.org/en/download/ ของ nodejs และติดตั้งแพ็คเกจตามระบบปฏิบัติการของคุณ

ติดตั้งแพคเกจที่จำเป็นตามระบบปฏิบัติการของคุณ เมื่อติดตั้ง nodejs แล้ว npm ก็จะถูกติดตั้งควบคู่ไปด้วย หากต้องการตรวจสอบว่ามีการติดตั้ง npm หรือไม่ให้พิมพ์ npm -v ในเทอร์มินัล ควรแสดงเวอร์ชันของ npm

C:\>npm -v
5.6.0

การติดตั้ง Angular 6 นั้นง่ายมากด้วยความช่วยเหลือของ angular CLI ไปที่หน้าแรกhttps://cli.angular.io/ ของเชิงมุมเพื่อรับการอ้างอิงของคำสั่ง

ประเภท npm install -g @angular/cliเพื่อติดตั้ง angular cli บนระบบของคุณ

คุณจะได้รับการติดตั้งด้านบนในเทอร์มินัลของคุณเมื่อติดตั้ง Angular CLI แล้ว คุณสามารถใช้ IDE ใดก็ได้ที่คุณเลือกเช่น WebStorm, Atom, Visual Studio Code เป็นต้น

ติดตั้ง Google Charts Wrapper

เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้งโมดูล Google Charts Wrapper ในโปรเจ็กต์ที่สร้างขึ้น

googleChartsApp> npm angular-google-charts

+ [email protected]
added 2 packages in 20.526s

เพิ่มรายการต่อไปนี้ในไฟล์ app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';

imports: [
   ...
   GoogleChartsModule
],

ในบทนี้เราจะแสดงการกำหนดค่าที่จำเป็นในการวาดแผนภูมิโดยใช้ Google Chart API ใน Angular

ขั้นตอนที่ 1 - สร้างแอปพลิเคชันเชิงมุม

ทำตามขั้นตอนต่อไปนี้เพื่ออัปเดตแอปพลิเคชัน Angular ที่เราสร้างในAngular 6 -บทการตั้งค่าโครงการ -

ขั้นตอน คำอธิบาย
1 สร้างโครงการที่มีชื่อgoogleChartsAppตามที่อธิบายไว้ในเชิงมุมที่ 6 - การติดตั้งโครงการบท
2 แก้ไขapp.module.ts , app.component.tsและapp.component.htmlตามที่อธิบายด้านล่าง เก็บไฟล์ที่เหลือไว้ไม่เปลี่ยนแปลง
3 คอมไพล์และเรียกใช้แอปพลิเคชันเพื่อตรวจสอบผลลัพธ์ของตรรกะที่ใช้งาน

ต่อไปนี้เป็นเนื้อหาของตัวอธิบายโมดูลที่แก้ไข app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
   declarations: [
      AppComponent   
   ],
   imports: [
      BrowserModule,GoogleChartsModule
   ],
   providers: [], bootstrap: [AppComponent]
})
export class AppModule { }

ต่อไปนี้เป็นเนื้อหาของไฟล์โฮสต์ HTML ที่แก้ไข app.component.html.

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="data"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

เราจะเห็น app.component.ts ที่อัปเดตในตอนท้ายหลังจากทำความเข้าใจกับการกำหนดค่าแล้ว

ขั้นตอนที่ 2 - ใช้การกำหนดค่า

ตั้งชื่อเรื่อง

title = 'Browser market shares at a specific website, 2014';

ตั้งค่าประเภทแผนภูมิ

type='PieChart';

ข้อมูล

กำหนดค่าข้อมูลที่จะแสดงบนแผนภูมิ

data = [
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7] 
];

ชื่อคอลัมน์

กำหนดค่าชื่อคอลัมน์ที่จะแสดง

columnNames = ['Browser', 'Percentage'];

ตัวเลือก

กำหนดค่าตัวเลือกอื่น ๆ

options = {
   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], is3D: true
};

ตัวอย่าง

พิจารณาตัวอย่างต่อไปนี้เพื่อทำความเข้าใจไวยากรณ์การกำหนดค่าเพิ่มเติม -

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Browser market shares at a specific website, 2014';
   type = 'PieChart';
   data = [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7] 
   ];
   columnNames = ['Browser', 'Percentage'];
   options = {    
   };
   width = 550;
   height = 400;
}

ผลลัพธ์

ตรวจสอบผลลัพธ์

แผนภูมิพื้นที่ใช้เพื่อวาดแผนภูมิตามพื้นที่ ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามพื้นที่ดังต่อไปนี้

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 พื้นที่พื้นฐาน

แผนภูมิพื้นที่พื้นฐาน

2 พื้นที่ที่มีค่าลบ

แผนภูมิพื้นที่มีค่าเป็นลบ

3 พื้นที่ที่ซ้อนกัน

แผนภูมิที่มีพื้นที่ซ้อนทับกัน

4 พื้นที่ที่มีจุดที่ขาดหายไป

แผนภูมิที่มีจุดที่ขาดหายไปในข้อมูล

แผนภูมิแท่งใช้เพื่อวาดแผนภูมิแบบแท่ง ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิแท่งดังต่อไปนี้

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 เบสิคบาร์

แผนภูมิแท่งพื้นฐาน

2 แผนภูมิแท่งที่จัดกลุ่ม

แผนภูมิแท่งที่จัดกลุ่ม

3 บาร์ซ้อน

แผนภูมิแท่งที่มีแถบซ้อนทับกัน

4 แถบลบ

แผนภูมิแท่งที่มีสแต็กลบ

แผนภูมิฟองใช้เพื่อวาดแผนภูมิแบบฟอง ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิแบบฟองต่อไปนี้

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 ฟองพื้นฐาน

แผนภูมิฟองพื้นฐาน

2 แผนภูมิฟองพร้อมป้ายกำกับข้อมูล

แผนภูมิฟองพร้อมป้ายกำกับข้อมูล

แผนภูมิแท่งเทียนใช้เพื่อแสดงมูลค่าเปิดและปิดเหนือความแปรปรวนของมูลค่าและโดยปกติจะใช้เพื่อแสดงหุ้น ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิแท่งเทียนต่อไปนี้

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 เชิงเทียนพื้นฐาน

แผนภูมิแท่งเทียนพื้นฐาน

2 เชิงเทียนพร้อมสีที่กำหนดเอง

แผนภูมิแท่งเทียนที่กำหนดเอง

แผนภูมิ Colummn ใช้ในการวาดแผนภูมิตาม colummn ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตาม colummn ต่อไปนี้

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 คอลัมน์พื้นฐาน

แผนภูมิ colummn พื้นฐาน

2 แผนภูมิคอลัมน์ที่จัดกลุ่ม

แผนภูมิ Colummn ที่จัดกลุ่ม

3 คอลัมน์แบบเรียงซ้อน

แผนภูมิ Colummn ที่มี colummn ซ้อนทับกัน

4 คอลัมน์ที่ซ้อนกันเชิงลบ

แผนภูมิ Colummn พร้อมกองลบ

แผนภูมิผสมช่วยในการแสดงผลแต่ละชุดเป็นประเภทเครื่องหมายที่แตกต่างกันจากรายการต่อไปนี้: เส้นพื้นที่แท่งเชิงเทียนและพื้นที่ขั้นบันได ในการกำหนดประเภทเครื่องหมายเริ่มต้นสำหรับชุดข้อมูลให้ใช้คุณสมบัติ seriesType คุณสมบัติ Series ถูกใช้เพื่อระบุคุณสมบัติของแต่ละซีรีส์ทีละรายการ ต่อไปนี้เป็นตัวอย่างของแผนภูมิคอลัมน์ที่แสดงความแตกต่าง

เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมิในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Googleแล้ว ตอนนี้ให้เราดูตัวอย่างของแผนภูมิคอลัมน์ที่แสดงความแตกต่าง

การกำหนดค่า

เราเคยใช้ ComboChart คลาสเพื่อแสดง Combination Chart

type='ComboChart';

ตัวอย่าง

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Fruits distribution';
   type = 'ComboChart';
   data = [
      ["Apples", 3, 2, 2.5],
      ["Oranges",2, 3, 2.5],
      ["Pears", 1, 5, 3],
      ["Bananas", 3, 9, 6],
      ["Plums", 4, 2, 3]
   ];
   columnNames = ['Fruits', 'Jane','Jone','Average'];
   options = {   
      hAxis: {
         title: 'Person'
      },
      vAxis:{
         title: 'Fruits'
      },
      seriesType: 'bars',
      series: {2: {type: 'line'}}
   };
   width = 550;
   height = 400;
}

ผลลัพธ์

ตรวจสอบผลลัพธ์

ฮิสโตแกรมคือแผนภูมิที่จัดกลุ่มข้อมูลตัวเลขลงในที่เก็บข้อมูลโดยแสดงที่เก็บข้อมูลเป็นคอลัมน์ที่แบ่งกลุ่ม ใช้เพื่ออธิบายการแจกแจงของชุดข้อมูลว่าค่าต่างๆอยู่ในช่วงบ่อยเพียงใด Google Charts จะเลือกจำนวนที่เก็บข้อมูลให้คุณโดยอัตโนมัติ ที่เก็บข้อมูลทั้งหมดมีความกว้างเท่ากันและมีความสูงเป็นสัดส่วนกับจำนวนจุดข้อมูลในที่เก็บข้อมูล ฮิสโตแกรมคล้ายกับแผนภูมิคอลัมน์ในแง่มุมอื่น ๆ ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามฮิสโตแกรมต่อไปนี้

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 ฮิสโตแกรมพื้นฐาน

แผนภูมิฮิสโตแกรมพื้นฐาน

2 การควบคุมสี

สีที่กำหนดเองของแผนภูมิ Histrogram

3 การควบคุมที่เก็บข้อมูล

ถังที่กำหนดเองของแผนภูมิ Histrogram

4 หลายซีรีส์

แผนภูมิ Histrogram มีหลายชุด

แผนภูมิเส้นใช้เพื่อวาดแผนภูมิตามเส้น ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามเส้นต่อไปนี้

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 เส้นพื้นฐาน

แผนภูมิเส้นพื้นฐาน

2 มีจุดที่มองเห็นได้

แผนภูมิที่มีจุดข้อมูลที่มองเห็นได้

3 สีพื้นหลังที่ปรับแต่งได้

แผนภูมิด้วยสีพื้นหลังที่กำหนดเอง

4 สีของเส้นที่ปรับแต่งได้

แผนภูมิด้วยสีเส้นที่กำหนดเอง

5 แกนที่ปรับแต่งได้และป้ายกำกับ

จัดทำแผนภูมิด้วยแกนที่กำหนดเองและป้ายกำกับ

6 กากบาท

แผนภูมิเส้นแสดงกากบาทที่จุดข้อมูลบนการเลือก

7 สไตล์เส้นที่ปรับแต่งได้

แผนภูมิด้วยสีเส้นที่กำหนดเอง

8 แผนภูมิเส้นที่มีเส้นโค้ง

แผนภูมิด้วยเส้นโค้งเรียบ

Google Map Chart ใช้ Google Maps API เพื่อแสดงแผนที่ ค่าข้อมูลจะแสดงเป็นเครื่องหมายบนแผนที่ ค่าข้อมูลอาจเป็นพิกัด (คู่ละยาว) หรือแอดเดรสจริง แผนที่จะถูกปรับขนาดตามเพื่อให้รวมจุดที่ระบุไว้ทั้งหมด

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 แผนที่พื้นฐาน

แผนที่ Google พื้นฐาน

2 แผนที่โดยใช้ละติจูด / ลองจิจูด

แผนที่ที่มีการระบุตำแหน่งโดยใช้ละติจูดและลองจิจูด

ต่อไปนี้เป็นตัวอย่างแผนผังองค์กร

แผนผังองค์กรช่วยในการแสดงลำดับชั้นของโหนดซึ่งใช้เพื่อแสดงภาพความสัมพันธ์ที่เหนือกว่า / รองลงมาในองค์กร ตัวอย่างเช่นแผนผังครอบครัวคือแผนผังองค์กรประเภทหนึ่ง เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมิในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Googleแล้ว ตอนนี้ให้เราดูตัวอย่างแผนผังองค์กร

การกำหนดค่า

เราเคยใช้ OrgChart คลาสเพื่อแสดงแผนผังองค์กร

type='OrgChart';

ตัวอย่าง

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type = 'OrgChart';
   data = [
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
         '', 'The President'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
         'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
   ];
   columnNames = ["Name","Manager","Tooltip"];
   options = {   
      allowHtml: true
   };
   width = 550;
   height = 400;
}

ผลลัพธ์

ตรวจสอบผลลัพธ์

แผนภูมิวงกลมใช้เพื่อวาดแผนภูมิวงกลม ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิวงกลมต่อไปนี้

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 พายพื้นฐาน

แผนภูมิวงกลมพื้นฐาน

2 แผนภูมิโดนัท

แผนภูมิโดนัท.

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

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

4 แผนภูมิวงกลมที่มีชิ้นส่วนระเบิด

แผนภูมิวงกลมที่มีชิ้นส่วนระเบิด

แผนภูมิ sankey เป็นเครื่องมือในการแสดงภาพและใช้เพื่อแสดงการไหลจากชุดค่าหนึ่งไปยังอีกชุดหนึ่ง อ็อบเจ็กต์ที่เชื่อมต่อเรียกว่าโหนดและการเชื่อมต่อเรียกว่าลิงค์ Sankeys ใช้เพื่อแสดงการทำแผนที่แบบกลุ่มต่อกลุ่มระหว่างสองโดเมนหรือหลายเส้นทางผ่านชุดของขั้นตอน

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 แผนภูมิ Sankey พื้นฐาน

แผนภูมิ Sankey พื้นฐาน

2 แผนภูมิ Sankey หลายระดับ

แผนภูมิ Sankey หลายระดับ

3 การปรับแต่งแผนภูมิ Sankey

แผนภูมิ Sankey ที่กำหนดเอง

ต่อไปนี้เป็นตัวอย่างของแผนภูมิกระจาย

เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมิในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Googleแล้ว ตอนนี้ให้เราดูตัวอย่างของแผนภูมิกระจาย

การกำหนดค่า

เราเคยใช้ ScatterChart คลาสเพื่อแสดงแผนภูมิกระจาย

type = 'ScatterChart';

ตัวอย่าง

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Age vs Weight';
   type='ScatterChart';
   data = [
      [8,12],
      [4, 5.5],
      [11,14],
      [4,5],
      [3,3.5],
      [6.5,7]
   ];
   columnNames = ['Age', 'Weight'];
   options = {   
   };
   width = 550;
   height = 400;
}

ผลลัพธ์

ตรวจสอบผลลัพธ์

แผนภูมิพื้นที่แบบขั้นบันไดคือแผนภูมิพื้นที่แบบขั้นบันได เราจะพูดถึงประเภทของแผนภูมิพื้นที่แบบขั้นบันไดต่อไปนี้

ซีเนียร์ No ประเภทแผนภูมิ / คำอธิบาย
1 แผนภูมิขั้นพื้นฐาน

แผนภูมิพื้นที่ขั้นพื้นฐาน

2 แผนภูมิขั้นตอนที่ซ้อนกัน

แผนภูมิพื้นที่ขั้นบันไดแบบเรียงซ้อน

แผนภูมิตารางช่วยในการแสดงผลตารางซึ่งสามารถจัดเรียงและเพจได้ เซลล์ตารางสามารถจัดรูปแบบโดยใช้สตริงรูปแบบหรือโดยการแทรก HTML โดยตรงเป็นค่าของเซลล์ ค่าตัวเลขจัดชิดขวาตามค่าเริ่มต้น ค่าบูลีนจะแสดงเป็นเครื่องหมายถูกหรือเครื่องหมายกากบาท ผู้ใช้สามารถเลือกแถวเดียวด้วยแป้นพิมพ์หรือเมาส์ สามารถใช้ส่วนหัวคอลัมน์สำหรับการเรียงลำดับ แถวส่วนหัวยังคงแก้ไขระหว่างการเลื่อน ตารางเริ่มการทำงานของเหตุการณ์ที่เกี่ยวข้องกับการโต้ตอบของผู้ใช้

เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมิในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Googleแล้ว ตอนนี้ให้เราดูตัวอย่างของแผนภูมิตาราง

การกำหนดค่า

เราเคยใช้ Table คลาสเพื่อแสดงแผนภูมิตาราง

type = 'Table';

ตัวอย่าง

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = "";
   type = 'Table';
   data = [
      ['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]
   ];
   columnNames = ["Name", "Salary","Full Time Employee"];
   options = { 
     alternatingRowStyle:true,
     showRowNumber:true  
   };
   width = 550;
   height = 400;
}

ผลลัพธ์

ตรวจสอบผลลัพธ์

TreeMap เป็นการแสดงภาพของแผนผังข้อมูลโดยที่แต่ละโหนดอาจมีเด็กเป็นศูนย์หรือมากกว่าและมีพาเรนต์หนึ่งตัว (ยกเว้นรูท) แต่ละโหนดจะแสดงเป็นสี่เหลี่ยมผืนผ้าสามารถกำหนดขนาดและสีได้ตามค่าที่เรากำหนด ขนาดและสีมีมูลค่าเทียบกับโหนดอื่น ๆ ทั้งหมดในกราฟ ต่อไปนี้เป็นตัวอย่างของแผนภูมิทรีแมป

เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมิในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Googleแล้ว ตอนนี้ให้เราดูตัวอย่างแผนภูมิ TreeMap

การกำหนดค่า

เราเคยใช้ TreeMap คลาสเพื่อแสดงแผนภูมิ TreeMap

type = 'TreeMap';

ตัวอย่าง

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type='TreeMap';
   data = [
      ["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],
          
   ];
   columnNames = ["Location", "Parent","Market trade volume (size)","Market increase/decrease (color)"];
   options = { 
      minColor:"#ff7777",
      midColor:'#ffff77',
      maxColor:'#77ff77',
      headerHeight:15,
      showScale:true
   };
   width = 550;
   height = 400;
}

ผลลัพธ์

ตรวจสอบผลลัพธ์