有没有办法在ng2-charts中使用rxjs ?

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上的文档说:

在Angular第一次显示数据绑定属性并设置指令/组件的输入属性后，初始化指令/组件。

这个生命周期事件在视图初始化之后被调用。您的lineChartData$定义为:

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

…直到ngOnInit()调用才初始化。因此，视图试图绑定lineChartData$，当时仍然是undefined。因此，抛出的错误消息可能来自ng2-charts内部。