Question

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

例如： <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">时可以成功使用它，但我希望不必显式声明该顺序。

（尽管此数据每天都会更改，但我认为没有必要将这些数据实际显示在图表上。）

Answer 1

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

我意识到，只要将一个数组放入[series]（不带括号），它就可以正常工作。因此，在我的NodeJS脚本中，我只是在hourlyarray文档上创建了一个名为average和message的更新字段。

我能够放入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的管道。

在ng-apexcharts中显示动态数据

1 个答案: