javascript - Google 地理图表不会在 Angular Material mdTabs 内呈现

Question

我正在使用Google Geo chart里面Angular Material tabs 。

当您加载页面时，图表第一次呈现良好，但是当您更改页面并返回此页面时，它会出现容器错误，并且图表不会加载。

不幸的是，无法在编辑器上复制此错误来解释该错误。

有人知道这个问题有什么解决办法吗？

Answer 1

使用该指令并确保您最初加载了图表，

  var app = angular.module('app', ['ngMaterial', 'googlechart']);
    app.controller('ChartController', function($scope) {
      var chart1 = {};
      chart1.type = "GeoChart";
      chart1.data = [
        ['Locale', 'Count', 'Percent'],
        ['Germany', 22, 23],
        ['United States', 34, 11],
        ['Brazil', 42, 11],
        ['Canada', 57, 32],
        ['France', 6, 9],
        ['RU', 72, 3]
      ];
      chart1.options = {
        width: 600,
        height: 300,
        chartArea: {
          left: 10,
          top: 10,
          bottom: 0,
          height: "100%"
        },
        colorAxis: {
          colors: ['#aec7e8', '#1f77b4']
        },
        displayMode: 'regions'
      };
      chart1.formatters = {
        number: [{
          columnNum: 1,
          pattern: "$ #,##0.00"
        }]
      };
      $scope.chart = chart1;
    })

<强> DEMO