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

感谢您阅读。

除了console.log(document.getElementById('initial_chart_div'))

之外，

P.S。function drawChart()始终为空

Answer 1

我在setTimeout函数

中使用drawChart解决了这个问题

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);

当Angular 4中的Route更改时，Google Chart“Container is not defined”

1 个答案: