Question

我正在尝试在Flexbox容器中放置一个高图。图表随着容器的增长而增长，但是当容器收缩时它不会收缩。

我的项目使用angularJS和highcharts-ng，虽然我猜测问题在于flexbox本身。至少在Chrome和IE中也是如此。

Here's a plunkr说明了这个问题。如果打开嵌入式视图，您会注意到当窗口变宽时，两个图表都会重新调整以适应。但是当你把它缩小时，顶部图表（在弹性箱中）保持不变。

我放入了回流按钮来广播highcharts-ng的回流事件，但它似乎没有效果。

我正在寻找一种解决方法或任何仍然允许我使用flexbox的解决方案。

以下是Plunkr的代码。它基于highcharts-ng的作者的另一个插件，解决了类似的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或flex-basis，以帮助Highcharts找出父元素的尺寸。

我还删除了width: 100% .highcharts-container，因为它没有做任何事情。

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

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

1 个答案: