谷歌地理圖表不呈現內角材料mdTabs

Question

我在Angular Material tabs內使用Google Geo chart。

當您加載頁面時，圖表首次呈現良好狀態，但當您更改頁面並返回此頁面時，它會顯示容器錯誤，並且圖表無法加載。

不幸的是不能複製這個錯誤，並編輯來解釋這個錯誤。

有沒有人知道此問題的任何修復？

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