8
フレックスボックスコンテナにハイチャートを配置しようとしています。チャートはコンテナがうまくいっても伸びますが、コンテナが収縮しても縮むことはありません。highcharts-ngは大きくなりますが、flexboxでは縮小しません。
私のプロジェクトではangularJSとhighcharts-ngを使用していますが、問題はflexbox自体にあります。少なくともChromeとIEでは同じです。
Here's a plunkrこの問題を示しています。埋め込みビューを開くと、ウィンドウを広げたときに両方のチャートが合うようにリフローされます。しかし、幅を狭くすると、フレックスボックス内のトップチャートは変更されません。
highcharts-ngのリフローイベントをブロードキャストするためにリフローボタンを押しましたが、効果がないようです。
フレックスボックスを使用できる解決策または解決策を探しています。
以下はPlunkrのコードです。ブートストラップコンテナでも同様の問題を解決したhighcharts-ngの著者による別の記事に基づいています。
index.htmlを
<!DOCTYPE html>
<html ng-app="highChartTest">
<head>
<link data-require="[email protected]" 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="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="[email protected]*" 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="[email protected]" data-semver="4.0.1" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts.js"></script>
<script data-require="[email protected]" 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);
}
};
}
})();