javascript - 当 Angular 4 中的路线发生变化时，Google Chart "Container is not defined"

Question

我在 Angular 4 中使用 Google Charts，当我转到另一条路线并返回时，我收到错误 Error: Container is not defined。

这是我的组件

ngOnInit() {

    this.service.getData().subscribe(
        res => {
            this.controlData = res;
            this.createCharts(this.year);
        }
    );

}

createCharts(resultYears: any) {
    google.charts.load('current', {'packages': ['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      const data = new google.visualization.DataTable();

      // Declare columns
      data.addColumn('string', 'Year');
      data.addColumn('number', 'Pendiente');
      data.addColumn('number', 'En Proceso');
      data.addColumn('number', 'No Recuperada');
      data.addColumn('number', 'Recuperada');

      // Add data.
      for (const chartData of resultYears) {
        data.addRow([chartData['year'].toString(), chartData['pendiente'], chartData['enproceso'], chartData['norecuperada'], chartData['recuperada']]);
      }

      const options = {
        height: 400,
        isStacked: true,
        vAxis: {format: 'decimal'},
        hAxis: {format: ''},
        series: {
          0: {color: '#fdd835'},
          1: {color: '#0091ff'},
          2: {color: '#e53935'},
          3: {color: '#43a047'},
        }
      };

      const chart = new google.charts.Bar(document.getElementById('initial_chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));

    }
  }

这是我的html

<div id="initial_chart_div"></div>

一切正常，我可以看到图表，但是如果我在/ChartUrl 中移动到/AnotherUrl 并返回/ChartUrl，我会收到错误消息 Error: Container is not defined

感谢阅读。

P.S.:console.log(document.getElementById('initial_chart_div')) 始终为 null，除了 function drawChart()

Answer 1

我用 drawChart 函数中的 setTimeout 解决了这个问题

function drawChart() {

      setTimeout(() => {
        data = new google.visualization.DataTable();

        // Declare columns
        data.addColumn('string', 'Año');
        data.addColumn('number', 'Pendiente');
        data.addColumn('number', 'En Proceso');
        data.addColumn('number', 'No Recuperada');
        data.addColumn('number', 'Recuperada');
        data.addColumn('number', 'Presentada');

        // Add data.
        for (const chartData of context.year) {
          data.addRow([chartData['año'].toString(), chartData['pendiente'], chartData['enproceso'], chartData['norecuperada'], chartData['recuperada'], chartData['presentada']]);
        }

        chart = new google.charts.Bar(context.chartDiv.nativeElement);
        chart.draw(data, google.charts.Bar.convertOptions(options));

        google.visualization.events.addListener(chart, 'select', () => {
          const selection = chart.getSelection()[0];

          if (selection && selection.row !== null) {
            const row = selection.row;
            const column = selection.column;
            data.getValue(row, 0);
            data.getColumnLabel(column);

            context.dataGridGrupoEstado.selected = context.arrGrupoEstado.filter(me => me.grupoEstado === data.getColumnLabel(column).toLowerCase());
            context.dataGridYear.selected = context.arrYears.filter(ye => ye.year.toString() === data.getValue(row, 0));
            context.drawGridYear(parseInt(data.getValue(row, 0), 10));
            context.router.navigate(['/control de recuperos'], { queryParams: { year: context.dataGridYear.selected[0].year, grupoE: context.dataGridGrupoEstado.selected[0].grupoEstado }});
          }
        });
      }, 10);