แผนภูมิ Google เชิงมุม - ไวยากรณ์การกำหนดค่า

ในบทนี้เราจะแสดงการกำหนดค่าที่จำเป็นในการวาดแผนภูมิโดยใช้ 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;
}

ผลลัพธ์

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