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>

我认为，即使我会让它如何运作，这也是最糟糕的做法。

如果没有此错误的解决方案，请推荐任何其他具有内置实时图表的liberies。

编辑：

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$的{{1}}。因此，错误消息可能来自undefined内部。

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

1 个答案: