javascript - 有没有办法将 rxjs 与 ng2-charts 一起使用？

Question

我找不到用 ng2-charts 实现实时图表的方法。

执行此操作时出现错误:

<div *ngIf="(lineChartData$ | async)!=null">
    ....
    <canvas baseChart width="100" height="200"
      [datasets]="lineChartData$ | async" <<-ERROR: "Cannot read property 'data' of undefined"
       ....
    </canvas>
</div>

我认为即使我能以某种方式让它发挥作用，这也将是最糟糕的方式。

<小时/>

如果无法解决此错误，请推荐任何其他具有内置实时图表的库。

<小时/>

编辑:

app.component.html:

<div *ngIf="(lineChartData$ | async)!=null">
  <div class="row">
    <div class="col-md-6">
      <div style="display: block;">
        <canvas baseChart width="100" height="200"
                [datasets]="lineChartData$ | async"   <<<-- ERROR
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
                [colors]="lineChartColors"
                [legend]="lineChartLegend"
                [chartType]="lineChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>
      </div>
    </div>
    <div class="col-md-6" style="margin-bottom: 10px">
      <table class="table table-responsive table-condensed">
        <tr>
          <th *ngFor="let label of lineChartLabels"></th>
        </tr>
        <tr *ngFor="let d of lineChartData">
          <td *ngFor="let label of lineChartLabels; let j=index"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

app.component.ts:

import {Component, OnInit} from '@angular/core';
import {Observable} from "rxjs";
import {Store} from "@ngrx/store";
import {AppState} from "../../redux/design/app-state";
import {AngularFire, AuthProviders, FirebaseObjectObservable} from "angularfire2";
import 'rxjs/add/operator/withLatestFrom';
import {AuthActions} from "../../redux/actions/auth.actions";
import {UserService} from "../../services/user.service";

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit
{
  private lineChartData$:Observable<Array<any>>;
  constructor(private authActions: AuthActions,
              private af: AngularFire,
              private userService:UserService,
              private store:Store<AppState>){}
  public ngOnInit(): void {
    this.lineChartData$=Observable.interval(500)
      .map(index=>[{data: [65, 59, index, 81, 56, 55, 40], label: 'Series A'},
          {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
          {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
        ]);
  }
// lineChart
  public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions:any = {
    animation: false,
    responsive: true,
    maintainAspectRatio: false
  };
  public lineChartColors:Array<any> = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
  public lineChartLegend:boolean = true;
  public lineChartType:string = 'line';


  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }
}

Answer 1

我对 ng2-charts 不太了解，但该错误表明问题出在其他地方。

ngOnInit 上的文档说:

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

所以这个生命周期事件是在 View 初始化之后调用的。您的 lineChartData$ 定义为:

private lineChartData$:Observable<Array<any>>;

...并且直到 ngOnInit() 调用之前它才被初始化。因此， View 尝试绑定(bind)当时仍然是undefined的lineChartData$。因此，错误消息可能是从 ng2-charts 内部抛出的。