我对highcharts和bootstrap模态有问题 . highcharts图表不适合容器内部 .

enter image description here

图表的宽度应为100％，但宽度= 600px，默认模态宽度 . 如果你使用modal-sm，modal-lg，...类，这是不行的 .

我已经阅读了另一篇关于此的帖子，解决方案是进行$（window）.resize（）调用或使用highchart reflow方法 .

好 . 我使用了用于angularjs的ui.bootstrap的“渲染”承诺尝试了这个，但是渲染在模态容器内产生了一个具有模态大小的ng-class属性（modal-lg，modal-sm，...） .

此调用后，此参数在真实的类=“modal-lg”中呈现 .

你可以测试一下：

myapp.controller('myctrl', function ($scope, $uibModal) {
   $scope.openModal = function() {
     var modalInstance = $uibModal.open({
       animation: true,
       templateUrl: 'modal.html',
       controller: 'modalctrl',
       size: 'lg'
     })
     .rendered.then(function() {
       console.log('.modal-dialog').attr('class')
     });
   };
 });

这将返回主类“模态对话框”，但不返回渲染的ng类 .

我用一个不太理想的解决方案解决了它：

.rendered.then(function() {
  $('.modal-dialog').addClass('modal-xl');
  $(window).resize();
});

有没有更好的方法来做到这一点？

资料来源：

index.html

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
    <script src="https://rawgit.com/pablojim/highcharts-ng/master/dist/highcharts-ng.js"></script>
  </head>
  <body>
    <div ng-app="myapp">
      <div ng-controller="myctrl">
        <button ng-click="openModal()">Open Modal</button>
      </div>
    </div>
  </body>

  <script>
  var myapp = angular.module('myapp', ["highcharts-ng", "ui.bootstrap"]);

  myapp.controller('myctrl', function ($scope, $uibModal) {
      $scope.openModal = function() {
          var modalInstance = $uibModal.open({
          animation: true,
          templateUrl: 'modal.html',
          controller: 'modalctrl',
          size: 'lg'
        })
        .rendered.then(function() {
          $('.modal-dialog').addClass('modal-xl');
          $(window).resize();
        });
      };
  });

  myapp.controller('modalctrl', function($scope) {
      $scope.mychart = {
        options: {
          xAxis: {
            categories: [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015]
          },
          title: 'demo',
        },
        series: [
          {name: 'serie1', data: [252, 259, 300, 312, 323, 354, 369, 378, 399]},
        ],
        loading: false,
      }
  });
  </script>
</html>

modal.html

<div class="modal-body">
  <highchart id="mychart" config="mychart"></highchart>
</div>
angularjs twitter-bootstrap highcharts angular-ui-bootstrap highcharts-ng