半岛外围网上直营

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: "//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可视化更新。