angular - 在 ng-apexcharts 中显示动态数据

Question

我希望能够使用这个循环的结果: <div *ngFor="let hour of hours | async">{{ hour.messages }}</div> 用于 [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 脚本中，我只是在我的 message 文档中创建了一个名为 hourlyarray 和 average 的更新字段。

我能够放入 ChartJs 条形图 Canvas 中:

 <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 个不同的部分 清晨、早上、中午、晚上、晚上。

在我的 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)));

(使用 rxjs/operators 中的 map)

然后在我的 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()));

请注意:您似乎不能使用像 | 这样的管道日期:dateRef 数组上的“EE”。