3

我对 highcharts 和 bootstrap modals 有疑问。highcharts 图表无法正确放入容器中。

在此处输入图像描述

图表应该有宽度 = 100% 但它有宽度 = 600px，默认模态宽度。如果您使用 modal-sm, modal-lg, ... 类，这是不行的。

我已经阅读了另一篇关于此的帖子，解决方案是调用 $(window).resize() 或使用 highchart 回流方法。

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

此参数在此调用后以真实的 class="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')
     });
   };
 });

这将返回主类“modal-dialog”，但不返回呈现的 ng-class。

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

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

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

资料来源：

索引.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>

模态的.html

<div class="modal-body">
  <highchart id="mychart" config="mychart"></highchart>
</div>
4

0 回答 0