9

ハイチャートをフレックスボックス コンテナーに入れようとしています。グラフはコンテナーに合わせて大きくなりますが、コンテナーが縮小しても縮小しません。

私のプロジェクトでは angularJS と highcharts-ng を使用していますが、問題はフレックスボックス自体にあると推測しています。少なくともChromeとIEでは同じです。

この問題を説明する plunkrを次に示します。埋め込みビューを開くと、ウィンドウを広くすると、両方のチャートがリフローして収まります。ただし、幅を狭くしても、トップ チャート (フレックスボックス内) は変更されません。

highcharts-ngのリフローイベントをブロードキャストするリフローボタンを入れましたが、効果がないようです。

フレックスボックスを引き続き使用できる回避策または解決策を探しています。

以下は Plunkr のコードです。これは、ブートストラップ コンテナーの同様の問題を解決した、highcharts-ng の作成者による別の plunk に基づいています。

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>

スタイル.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);
          }
        };
    }
})();
4

1 に答える 1