3

我希望能够使用此循环的结果： <div *ngFor="let hour of hours | async">{{ hour.messages }}</div> 在[series]Apex Chart 中使用。

例如： <apx-chart *ngFor="let hour of hours | async" class="apex-charts" [series]="{{ hour.messages }}" [chart]="lineChart.chart"></apx-chart>，这显然不起作用。

[series]="[{name: 'Messages', data: [message.sunday, message.monday, message.tuesday, message.wednesday, message.thursday, message.friday, message.saturday]}]"在另一个图表中，当我在其中放置一个循环时，我能够成功使用<div *ngFor="let message of messages | async">，但我希望不必明确声明订单。

（虽然这些数据每天都会发生变化，但我并不认为需要将数据实际显示在图表上。）

4

1 回答 1

0

我以两种不同的方式解决了我的问题。

我意识到，如果我只是将一个数组放入[series]（不带括号）中，它就可以完美地工作。所以在我的 NodeJS 脚本中，我只是在我的文档上创建了一个名为hourlyarrayand的更新字段。averagemessage

我能够放入 ChartJs 条形图画布：

 <canvas *ngIf="message | async as message; else loading" baseChart 
                        [datasets]="[{ data: message.hourlyarray, label: 'Today' },
                                     { data: message.average, label: 'Average' }]"
                        [labels]="barChartLabels"
                        [options]="barChartOptions"
                        [plugins]="barChartPlugins"
                        [legend]="barChartLegend"
                        [chartType]="barChartType">
                    </canvas>

但是我仍然有一个问题，我想在一天中的每个部分包括每天的消息数量，并且每天在一个名为messagedata. 在每份文件（以日期命名2020-01-01，2020-01-02...）上，我将这一天分为 5 个不同的部分earlymorning, morning, midday, evening, night。

在我的中，我从集合component.ts中映射了这些中的每一个。messagedata

 this.earlymorningRef = collectionRef.collection('messagedata').valueChanges().pipe(map(data => data.map(d => d.earlymorning)));
 this.morningRef = collectionRef.collection('messagedata').valueChanges().pipe(map(data => data.map(d => d.morning)));
 this.middayRef = collectionRef.collection('messagedata').valueChanges().pipe(map(data => data.map(d => d.midday)));
 this.eveningRef = collectionRef.collection('messagedata').valueChanges().pipe(map(data => data.map(d => d.evening)));
 this.nightRef = collectionRef.collection('messagedata').valueChanges().pipe(map(data => data.map(d => d.night)));
 this.dateRef = collectionRef.collection('messagedata').valueChanges().pipe(map(data => data.map(d => d.date)));

（使用map来自rxjs/operators）

然后在我的 上component.html，我创建了一个 Apex 图表。

<h4 class="header-title mt-1">Times of day</h4>

<apx-chart *ngIf="{earlymorning: earlymorningRef | async, 
morning: morningRef | async, 
midday: middayRef | async, 
evening: eveningRef | async, 
night: nightRef | async, 
date: dateRef | async } as messagedataRef; else loading" 
class="apex-charts" 
[series]="[{name: 'Early Morning',data: messagedataRef.earlymorning},
{name: 'Morning',data: messagedataRef.morning},
{name: 'Midday',data: messagedataRef.midday},
{name: 'Evening',data: messagedataRef.evening},
{name: 'Night',data: messagedataRef.night}]" 
[chart]="timeofdayChart.chart" 
[xaxis]="{categories:  messagedataRef.date, axisBorder: {show: true}}" [tooltip]="timeofdayChart.tooltip" [stroke]="timeofdayChart.stroke" [autoUpdateSeries]="false" 
[title]="timeofdayChart.title" [grid]="timeofdayChart.grid" [colors]="timeofdayChart.colors" [responsive]="timeofdayChart.responsive" [dataLabels]="timeofdayChart.dataLabels"></apx-chart>

使用相同的方法，我能够创建过去一周每日消息量的图表。

this.pastweekUsageRef = messageRef.collection(('messagedata'), 
ref=> ref.orderBy("date", "desc").limit(8)).valueChanges()
.pipe(map(data => data.map(d => d.usage).slice(0).reverse()));

this.pastweekDateRef = messageRef.collection(('messagedata'), 
ref=> ref.orderBy("date", "desc").limit(8)).valueChanges()
.pipe(map(data => data.map(d => d.date).slice(0).reverse()));

注意事项：您似乎不能| date: 'EE'在dateRef阵列上使用管道。

于 2020-01-08T21:01:52.567 回答