Ionic3 ng2-charts：图表未加载

Question

我正在尝试在我的 Ionic 3 项目中使用 ng2-charts 来显示我从 Cloud Firestore 获得的数据的累积图表，但接收到的数据并未绘制在图表上。

累积的.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>

累积.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 后面使用，并且由于无法解释您的原因，to-way 数据绑定不适用于 ng2-charts，然后您的图表是在数据之前绘制的，因此当数据是不是已经不再渲染图了。

为此，我提出了一个适合我的技巧。我在布尔类型的属性中声明了一个变量为 false，并且使用 angular 的 conicional * 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。