Ionic3 ng2-charts：图表未加载

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.logthis.barChartLabels和this.barChartData时，正确的数据出现在控制台中，但我只是在页面上出现一组空轴。

如果有人能帮我弄清楚为什么图表没有绘制，我将不胜感激！

Answer 1

他，发生的事情是 ng2-charts 在 ChartJS 后面使用，并且由于无法解释你的原因，to-way 数据绑定不适用于 ng2-charts，然后你的图表在数据之前绘制，因此当数据已经是图表不再渲染。

为此，我提出了一个对我有用的技巧。我在 false 类型的布尔值属性中声明了一个变量，并使用 angular 的 conficional * ngIF 我对视图说，直到变量不为真时才绘制它。然后，只有当我完全加载完数据时，我才将该变量设置为 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>

redraw 变量只有在您已经获取数据并将其分配给lineChartData1 时才设置为true。

Ionic3 ng2-charts：图表未加载

Ionic3 ng2-charts: chart not loading

firebase

ionic-framework

ng2-charts

ionic3

google-cloud-firestore