Question

我试图在我的Ionic 3项目中使用ng2-charts来显示我从Cloud Firestore获得的累积数据图，但是收到的数据没有在图表上绘制

cumulative.html：

<ion-content padding>
  <div>
    <div style="display: block">
      <canvas baseChart height="350"
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
    </div>
  </div> 
</ion-content>

cumulative.ts：

export class CumulativePage {

  public barChartOptions:any  = {
    scaleShowVerticalLines: false,
    responsive: true,
    scaleShowValues: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          autoSkip: false
        }
      }]
    }
  }; 

  public barChartLabels:string[] = [];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;

  public barChartData:any[] = [
    {data: [], label: 'time'}
  ];

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

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

  public classId: any;

  constructor(public navCtrl: NavController, public navParams: NavParams,
    public afs: AngularFirestore) {
  }

  ionViewDidLoad() {
    this.classId = this.navParams.get('className');
    console.log(this.classId);

    let queryCol = this.afs.collection('sessions', ref => ref.where('name', '==', this.classId));
    let query = queryCol.snapshotChanges();
    query.subscribe((snap) => {
      snap.forEach(q => {
        console.log(q.payload.doc.id);
        let sessionId = q.payload.doc.id;
        this.afs.collection('sessions').doc(sessionId).collection('helpList').ref.get()
          .then(snap => {
            snap.forEach(doc => {
              let data = doc.data() as Help;
              let exists = false;
              this.barChartLabels.forEach(user => {
                if (user == doc.data().userId){
                  let index = this.barChartLabels.indexOf(user);
                  this.barChartData[0].data[index] += doc.data().time;
                  exists = true;
                }
                else{
                  console.log(user, doc.data().userId);
                }
              })
              if (exists == false){
                this.barChartLabels.push(doc.data().userId);
                this.barChartData[0].data.push(doc.data().time);
                console.log(this.barChartLabels);
                console.log(this.barChartData);
              }    
            })

          })
      })
    })
    console.log(this.barChartLabels);
    console.log(this.barChartData);
  }
}

我试图从Firestore中的各种文档中获取用户ID和时间，并累计时间以获得每个用户的总时间。（this.barChartLabels存储用户ID，this.barChartData存储总时间）。

当我在console.log this.barChartLabels和this.barChartData中时，控制台中会显示正确的数据，但我只是在页面上显示一组空轴。

如果有人可以帮我弄清楚为什么图表不是密谋，我真的很感激！

Answer 1

他，会发生什么情况是ng2-charts使用了ChartJS，并且由于没有解释你的原因导致数据绑定对于ng2-charts不起作用，那么你的图表是在数据之前绘制的，因此当数据被绘制时已经是图表不再渲染了。

为此我提出了一个适合我的技巧。我在false类型的boolean类型的属性中声明了一个变量，并且带有一个conicional * ngIF of angular我对视图说，在变量不为真之前它不会被绘制。然后，只有当我完全加载数据时，我才将该变量设置为true。

例如，我的观点：

<div *ngIf="redraw == true" style="display: block;">
          <canvas baseChart width="300" height="400"
                      [datasets]="lineChartData1"
                      [labels]="lineChartLabels1"
                      [options]="lineChartOptions1"
                      [colors]="lineChartColors1"
                      [legend]="lineChartLegend1"
                      [chartType]="lineChartType1"
                      (chartHover)="chartHovered($event)"
                      (chartClick)="chartClicked($event)"></canvas>
          </div>

当您已经获取数据并将其分配给lineChartData1时，重绘变量仅设置为true。

Ionic3 ng2-charts：图表未加载

1 个答案: