Question

我对highcharts和bootstrap模态有问题。 highcharts图表不能正确放入容器内。

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

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

确定。我尝试使用ui.bootstrap for angularjs的“渲染”承诺，但渲染在模态容器内产生一个ng-class属性，其模态大小（modal-lg，modal-sm，...）。 / p>

此参数在此调用后以真实的类=“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的bootstrap模态中的Highcharts大小

0 个答案: