代码之家 › 专栏 › 技术社区 › Sven-Michael Stübe

角度材质选项卡内容c3js图表未显示

c3.js angular-material tabs typescript angular

Sven-Michael Stübe · 技术社区 · 8 年前

我想在“角度材质”选项卡中显示图表。但是选项卡初始化似乎是异步的,因此c3js无法找到div #detailed-chart 我的选项卡仍然为空。

样板

<mat-card class="col-xs-12">
  <mat-card-title>
    Detailed Utilization
  </mat-card-title>

  <mat-tab-group>
    <mat-tab label="Chart">
      <div id="detailed-chart" style="height: 200px"></div>
    </mat-tab>
    <mat-tab label="Table">
    </mat-tab>
  </mat-tab-group>
</mat-card>

组成部分

export class UtilizationComponent implements OnInit {
  ngOnInit() {       
    this.detailedChart = c3.generate({
      bindto: '#detailed-chart',
      data: {
        x: 'date',
        columns: [
          ['date'],
          ['room'],
          ['desk'],
          ['office']
        ]
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: '%m.%Y'
          }
        },
        y: {
          tick: {
            format: d3.format('.1%')
          }
        }
      }
    });   
  }

}

我还尝试手动查找div,但它似乎不存在。

const x = window.document.getElementById('detailed-chart');
console.log('foo', x);

输出

foo空

问题

在这里加载动态元素的英国方式是什么?是否需要为此选项卡创建单独的组件?

2 回复 | 直到 8 年前

Sven-Michael Stübe 8 年前

解决方案是使用另一个生命周期回调 ngAfterViewInit .

export class UtilizationComponent implements AfterViewInit {
  ngAfterViewInit() {       
    this.detailedChart = c3.generate({
      bindto: '#detailed-chart',
      data: {
        x: 'date',
        columns: [
          ['date'],
          ['room'],
          ['desk'],
          ['office']
        ]
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: '%m.%Y'
          }
        },
        y: {
          tick: {
            format: d3.format('.1%')
          }
        }
      }
    });   
  }
}