我遇到了一些问题，为一个简单的谷歌条形图获得一致的大小 .

我有一个显示一些信息的指令，我想要包含数据的条形图

app.directive('prodpercentiles', function($compile, $http, $timeout) {
return {
  scope: {
    'data': '=',
    'help': '@',
    'id': '@',
    'cardtitle': '@',
  },
  templateUrl: '/static/prod_percentiles.html',
  controller: function ($scope, $element) {
    $scope.elem = angular.element($('#'+$scope.id)).find('#chart')[0];

    $scope.draw_chart = function() {
      var data = new google.visualization.DataTable();
      $scope.chart_obj = new google.charts.Bar($scope.elem);
      //console.log($scope.elem)
      data.addColumn('string','Percentile')
      data.addColumn('number','Product Count')
      $scope.data.percentiles.sort(function(a,b) { return a.val > b.val;}).forEach(function(x) {
        data.addRow([x.val.toString(), x.count])
      })
      var options = {
        legend: { position: 'none'},
        title: 'Number of products in each percentile',
      };
      $scope.chart_obj.draw(data, options);
    }

页面上有两个具有不同数据的指令 . 我看到的行为是，在初始加载时，每个条形图的高度和宽度是默认值 . 我能够以不同的尺寸显示图表的唯一方法是将高度/宽度静态输入到选项中 . 我想避免这种情况，由于某些原因，我正在使用我正在应用于#chart元素的样式 .

但是，我已经设置了一个调整大小的侦听器来重新绘制图表，它工作正常：

$(window).resize(function(){$scope.draw_chart()});

因此，在调整窗口大小后，两个图表看起来都很好 . 现在，我已经在此沉没了足够的时间，我只想完成这个 . 我试图通过在加载图表时强制调整大小来解决这个问题 .

angular.element(window).trigger('resize')

有一个UI按钮可以从表格切换到条形图，它会调用draw_chart并调整大小 . 这应该是一个充分的工作 .

但是，现在当我在其中一个指令上切换条形图时，它实际上将图表固定在另一个指令中，反之亦然 . 有谁知道这可能是什么？我真的没有想法 . 如果我实际调整主浏览器窗口的大小，它们看起来都很好 .

这里真正的问题是图表在初始加载时没有正确调整大小 . 我试图在那里稍微延迟，以防DOM在尝试渲染时没有完全存在，但它没有帮助 .

第二个问题是调整大小 .

angularjs google-visualization