Google Geo Chart не отображает внутри Угловой материал 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