Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

在本教程中，我們將學習如何使用Firestore和官方的Highcharts Angular包裝器可視化實時數據庫更新。整個項目在此GitHub鏈接中。

我們將在本文中介紹以下幾點：

1. 設置Cloud Firestore項目。
2. 使用Firestore設置Angular項目。
3. 將Highcharts與Angular和Firestore集成。

1.要做的第一件事是創建一個項目，然后執行以下步驟：登錄到//console.firebase.google.com

2.單擊添加項目。

3.創建一個數據庫。

4.選擇“以測試模式啟動”。

5.為數據庫創建一個集合，使其具有多個文檔來存儲數據。

6.將文檔添加到集合中。

7.將您的Angular應用名稱添加到Firestore中。請確保選擇“ Web”，因為我們目前正在使用Web 。

8.通過將Angular App Name注冊到Firestore，我們將能夠立即使用所有關鍵功能。

9.獲取配置詳細信息，然后firebaseConfig在angular應用程序中使用該對象。

要設置Angular項目，請按照此鏈接中的說明進行操作。
順便說一句，創建完Angular項目后，請不要忘記運行以下命令，并說明執行該操作的原因：ng add @angular/fire

1. 列出所有Firebase項目。由此，我們可以選擇我們的項目進行進一步的配置和開發。
2. 創建一個列出您的項目配置的Firebase.json配置文件。
3. 創建一個.firebaserc文件來存儲您的項目別名。
4. 要更新文件。angular.json

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "AIzaSyBaGUX7iwBRthIKOE_uhyzs1aPEuKPlEAE",
    authDomain: "firestore-angular-highcharts.firebaseapp.com",
    databaseURL: "http://firestore-angular-highcharts.firebaseio.com",
    projectId: "firestore-angular-highcharts",
    storageBucket: "firestore-angular-highcharts.appspot.com",
    messagingSenderId: "669023523724",
    appId: "1:669023523724:web:43f04e6a2ce0a92c01fca9",
    measurementId: "G-ZD6C3CEC85"
  }
};

import {
  Injectable
} from '@angular/core';
import {
  Observable
} from 'rxjs';
import {
  AngularFirestore,
  AngularFirestoreCollection
} from "@angular/fire/firestore";
import {
  map
} from "rxjs/operators";
@Injectable({
  providedIn: 'root'
})
export class HighchartService {
  private rateCollection: AngularFirestoreCollection < chartModal > ;
  rates$: Observable < chartModal[] > ;
  constructor(private readonly firestoreservice: AngularFirestore) {
    this.rateCollection = firestoreservice.collection < chartModal > ('ChartData');
    // .snapshotChanges() returns a DocumentChangeAction[], which contains
    // a lot of information about "what happened" with each change. If you want to
    // get the data and the id use the map operator.
    this.rates$ = this.rateCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as chartModal;
        const id = a.payload.doc.id;
        return {
          id,
          ...data
        };
      }))
    );
  }
}
export interface chartModal {
  currency: string,
    rate: number
}

為了使用Highcharts可視化我們項目上的數據更新，我們需要包含Highcharts Angular包裝器。它允許我們訪問highcharts庫。是官方的角度包裝器。要安裝highcharts-angular和Highcharts庫，只需運行以下指令：。要使用這些軟件包，首先，必須導入它們。因此，在app.module.ts文件中，我們從highcharts-angular包中導入了模塊。另外，我們導入并使用firebaseConfig（見下文）：highchats-angular
npm install highcharts-angular highcharts
HighchartsChartModule
AngularFirestoreModuleinitializeApp

 import {
    BrowserModule
  } from "@angular/platform-browser";
  import {
    NgModule
  } from "@angular/core";
  import {
    HighchartsChartModule
  } from "highcharts-angular";
  import {
    AppRoutingModule
  } from "./app-routing.module";
  import {
    AppComponent
  } from "./app.component";
  import {
    AngularFireModule
  } from "@angular/fire";
  import {
    environment
  } from "src/environments/environment";
  import {
    AngularFireAnalyticsModule
  } from "@angular/fire/analytics";
  import {
    AngularFirestoreModule
  } from "@angular/fire/firestore";
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HighchartsChartModule,
      AngularFireAnalyticsModule,
      AngularFirestoreModule,
      AngularFireModule.initializeApp(environment.firebaseConfig),
    ],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}    

Highcharts從導入。從導入服務和模式。上，我們從文件存儲數據庫訂閱的發光值，并推動新值數組，然后調用和初始化圖表數據。import * as Highcharts from “highcharts”;
highchart.service
ngOnInit()chartdatagetChart()

import {
  Component,
  OnInit
} from "@angular/core";
import {
  HighchartService,
  chartModal
} from "./highchart.service";
import * as Highcharts from "highcharts";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  title = "Firestore-Angular-Highcharts";
  items$: chartModal[];
  Highcharts: typeof Highcharts = Highcharts;
  chardata: any[] = [];
  chartOptions: any;
  constructor(private highchartservice: HighchartService) {}
  ngOnInit() {
    this.highchartservice.rates$.subscribe((assets) => {
      this.items$ = assets;
      if (this.items$) {
        this.items$.forEach((element) => {
          this.chardata.push(element.rate);
        });
        this.getChart();
      }
    });
  }
  getChart() {
    this.chartOptions = {
      series: [{
        data: this.chardata,
      }, ],
      chart: {
        type: "bar",
      },
      title: {
        text: "barchart",
      },
    };
  }
}

該項目的最后一步是轉到app.component.html添加指令和一些屬性綁定以初始化圖表數據和選項：highcharts-chart

<highcharts-chart *ngIf="chartOptions"
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

如下面的GIF所示，條形圖從Firebase上托管的數據庫中獲取數據。當使用Firebase UI將新值添加到數據庫時，圖表的數據將更新并顯示。

同樣，在下面的示例中，我們正在將具有新值的折線圖繪制到同一折線圖上。

好吧，就是這樣。現在，您知道如何使用Firestore更新實時數據庫，以及如何使用Highcharts可視化更新。