代码之家  ›  专栏  ›  技术社区  ›  Standaa - Remember Monica

ng2图表:在循环中添加标签可防止图表加载

  •  0
  • Standaa - Remember Monica  · 技术社区  · 9 年前

    使用模拟数据,一切都很好,但是当我尝试迭代父组件传递的数组时,图形本身不会显示,只有正交标记,控制台中不会显示任何内容。

    这是我的代码:

    import { Component, Input } from '@angular/core';
    import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
    import { Traffic } from './traffic';
    
    @Component({
      selector: 'line-chart-component',
      directives: [CHART_DIRECTIVES],
      styles: [`
        .chart {
          display: block;
        }
      `],
      template: `
      <div style="display: block">
            <canvas baseChart
                  [datasets]="datasets"
                  [labels]="labels"
                  [chartType]="'line'"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)"></canvas>
            </div>
      `
    })
    
    export class LineChartComponent {
      _dataArray: Traffic[] = [];    
      private datasets = [
          {
            label: "Desktop",
            data: []
          }
        ];    
      private labels: string [] = [];
    
      @Input()
      set dataArray(dataArray: Traffic[]) {
        dataArray.forEach((data: any,index: number) => {
          this.datasets[0].data.push(Math.round(data.Value));
          this.labels.push(data.Date));
        });
        // this.labels = ['0','1','2','3','4','5','6','7','8','9','10','11'];
      }
    
      get dataArray() { return this._dataArray; }
    
      private options = {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      };
    }
    

    N、 B:没有一个数组是未定义的。两者都有一个良好的结构,包含我的所有数据,并有适当的类型。而且 Data.date 返回一个字符串。

    什么会导致这种行为?

    谢谢

    1 回复  |  直到 9 年前
        1
  •  0
  •   Standaa - Remember Monica    9 年前

    答案是:两个数组之间似乎存在某种竞争条件。我的猜测是,标签的推送比数字的推送花费更长的时间,因此图形无法正确加载。 使命感 this.datasets = this.datasets.slice(); 在我的setter结束时,更新图形完成了任务。