highcharts-ng 在 flexbox 中增长但不收缩

Question

我正在尝试将 highchart 放入 flexbox 容器中。图表随着容器增长就好了，但是当容器收缩时它不会收缩。

我的项目使用 angularJS 和 highcharts-ng，虽然我猜问题出在 flexbox 本身。至少在 Chrome 和 IE 中是一样的。

Here's a plunkr 说明了这个问题。如果您打开嵌入式视图，您会注意到当您将 window 变宽时，两个图表都会重新排列以适合。但是当你缩小它时，顶部图表（在 flexbox 中）保持不变。

我在highcharts-ng里放了回流按钮广播回流事件，但是好像没有效果

我正在寻找一种变通方法或任何仍能让我使用 flexbox 的解决方案。

以下是来自 Plunkr 的代码。它基于 highcharts-ng 的作者的另一个 plunk，该 plunk 解决了 bootstrap 容器的类似问题。

index.html

<!DOCTYPE html>
<html ng-app="highChartTest">

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />

  </head>

  <body ng-controller="MyHighChart as c">

    <div class="page-container">
      <div class="side-panel">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li><button ng-click="onReflowButtonPressed()" class="autocompare">Reflow</button></li>
          </ul>
        </div>
        <div class="main-panel">
             <highchart id="highchart01" config="c.config" height="300"></highchart>
        </div>
    </div>


   <highchart id="highchart02" config="c.config" height="300"></highchart>

    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
     <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="ui-bootstrap-tpls-0.12.0.min.js@*" data-semver="0.12.0" src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <script data-require="highcharts@4.0.1" data-semver="4.0.1" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts.js"></script>
    <script data-require="highcharts-ng@0.0.9" data-semver="0.0.9" src="https://rawgit.com/pablojim/highcharts-ng/master/dist/highcharts-ng.min.js"></script>

    <script src="app.js"></script>
  </body>

</html>

style.css

.page-container {
  margin: 20px;
  border: 1px solid black;
  display: flex;
}

.side-panel {
  width: 200px;
  flex-shrink: 0;
  background-color: #ddd;
}

.main-panel {
  margin: 10px;
  padding: 20px;
  flex-grow: 1;
  border: 1px solid blue;
}

.highcharts-container {
  width: 100%;
  border: 1px solid red;
}

app.js

(function() {
    angular.module('highChartTest', ['ui.bootstrap', 'highcharts-ng'])
        .controller('MyHighChart', ['$scope', '$timeout', MyHighChart]);

    function MyHighChart($scope, $timeout) {

        $scope.onReflowButtonPressed = function(){
          console.log("broadcasting reflow");
           $scope.$broadcast('highchartsng.reflow');
        }
        var chartId = 'yieldColumns01';
        this.widget = {
            chartId: chartId,
            cols: '12',
            title: 'Reflow Test'
        };

        this.config = {
            options: {
                chart: { type: 'column' },
                legend: {  enabled: false},
            },
            title: { enabled: false, text: ''},
            xAxis: {  categories: ['A', 'B', 'C', 'D', 'E', ] },
            yAxis: {   max: 100},
            series: [{
                name: '2014',
                data: [90.9, 66.1, 55.0, 53.2, 51.2]
            }],
            size: {    height: '300' },
            // function to trigger reflow in bootstrap containers
            // see: http://jsfiddle.net/pgbc988d/ and https://github.com/pablojim/highcharts-ng/issues/211
            func: function(chart) {
              $timeout(function() {
                chart.reflow();
                  //  //The below is an event that will trigger all instances of charts to reflow
                    //$scope.$broadcast('highchartsng.reflow');
             }, 0);
          }
        };
    }
})();

Answer 1

您可以在 .main-panel 容器上设置 a non-relative width or flex-basis 以帮助 Highcharts 确定父元素的尺寸。

我还删除了 .highcharts-container 上的 width: 100%，因为它什么也没做。

最初的 Plunkr 适用于 Safari 9.0.1，因此这可能是由于浏览器实现 flexbox 规范的方式不同（例如 related issue with width/height: 100%）

highcharts-ng 在 flexbox 中增长但不收缩

highcharts-ng grows but doesn't shrink in flexbox

css

highcharts

flexbox

angularjs

highcharts-ng