![1fad3d025cd73ba791abbc3e72dc5692.png](https://i-blog.csdnimg.cn/blog_migrate/6a174f08428a63ee528b5a8f483d06c1.jpeg)
在本教程中,我们将学习如何使用Firestore和官方的Highcharts Angular包装器可视化实时数据库更新。整个项目在此GitHub链接中。
我们将在本文中介绍以下几点:
- 设置Cloud Firestore项目。
- 使用Firestore设置Angular项目。
- 将Highcharts与Angular和Firestore集成。
设置Cloud Firestore项目
1.要做的第一件事是创建一个项目,然后执行以下步骤:登录到https://console.firebase.google.com
![842d003a8067b371deb5907cea09187a.png](https://i-blog.csdnimg.cn/blog_migrate/4bc81e32860d44f33145ba266014eb7b.png)
2.单击添加项目。
![9459a5938a281eead4e83f94f26ce818.png](https://i-blog.csdnimg.cn/blog_migrate/d191f8fa51d5172324fa66b1d2a92108.png)
3.创建一个数据库。
![8cb5eda9ca0b4cee351cc5e3de50059e.png](https://i-blog.csdnimg.cn/blog_migrate/4c62d3081ef87735974bab6024fcdaea.jpeg)
4.选择“以测试模式启动”。
![f6ca1cef91be62685b608ce5722b4f3b.png](https://i-blog.csdnimg.cn/blog_migrate/ca3d695dd4989f4d08b2288b9b579a79.jpeg)
5.为数据库创建一个集合,使其具有多个文档来存储数据。
![e990a4efa85b88340807d3274f7589ca.png](https://i-blog.csdnimg.cn/blog_migrate/592707dcab0db9ccb9483168f1324da2.png)
6.将文档添加到集合中。
![c8b389eda24170db3f7cf8274d6b5ae0.png](https://i-blog.csdnimg.cn/blog_migrate/1c702b7ca4dddceb34ec3ceb3918bc2b.png)
7.将您的Angular应用名称添加到Firestore中。请确保选择“ Web”,因为我们目前正在使用Web 。
![952a7c005fcb127aaa5c4ffddca4369e.png](https://i-blog.csdnimg.cn/blog_migrate/fde53f42cb49f521c33cbb100545c9e0.png)
8.通过将Angular App Name注册到Firestore,我们将能够立即使用所有关键功能。
![952a7c005fcb127aaa5c4ffddca4369e.png](https://i-blog.csdnimg.cn/blog_migrate/fde53f42cb49f521c33cbb100545c9e0.png)
9.获取配置详细信息,然后firebaseConfig在angular应用程序中使用该对象。
![9c443219827d0101c1d6966bdda4f1d4.png](https://i-blog.csdnimg.cn/blog_migrate/8cbfff5276aa5d6cfe496292d349b807.jpeg)
使用Firestore设置Angular项目
要设置Angular项目,请按照此链接中的说明进行操作。
顺便说一句,创建完Angular项目后,请不要忘记运行以下命令,并说明执行该操作的原因:ng add @angular/fire
- 列出所有Firebase项目。由此,我们可以选择我们的项目进行进一步的配置和开发。
- 创建一个列出您的项目配置的Firebase.json配置文件。
- 创建一个.firebaserc文件来存储您的项目别名。
- 要更新文件。angular.json
设置完成后,就该将Firebase配置对象添加到环境中了(见下文):
export const environment = {
production: false,
firebaseConfig: {
apiKey: "AIzaSyBaGUX7iwBRthIKOE_uhyzs1aPEuKPlEAE",
authDomain: "firestore-angular-highcharts.firebaseapp.com",
databaseURL: "https://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"
}
};
在此HighchartService中与Cloud Firestore API进行交互的最后一步(请参见下文):
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与Angular和Firestore集成
为了使用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 {}
让我们来看一下app.component.ts中的操作。
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将新值添加到数据库时,图表的数据将更新并显示。
![dd8a8b2b0179f86518f09aa30d7342b8.png](https://i-blog.csdnimg.cn/blog_migrate/133f1d4cfce386f6e1c2abb5d0e8672e.png)
同样,在下面的示例中,我们正在将具有新值的折线图绘制到同一折线图上。
![7855dea9b510d9ea90520637727b2291.png](https://i-blog.csdnimg.cn/blog_migrate/4ea346605d2c9351c95d9a352dc061f8.png)
好吧,就是这样。现在,您知道如何使用Firestore更新实时数据库,以及如何使用Highcharts可视化更新
本文章转载自慧都网。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果