highcharts-ng水平棒グラフの反応性を高める方法

Question

私はいくつかのタイプのハイチャートで作業しましたが、水平棒グラフは特殊なようです - グラフの幅を画面サイズに合わせるのは苦労しました。問題を説明するために、jsfiddleを作成しました。既定では、利用可能な幅全体ではなく固定サイズ600pxです。私はそれに応じてさまざまな方法で幅を調整しようとしましたが、どれも完全には動作しません。 1つの方法は、$ window.onresizeをコードのように使用することですが、動作しません。しかし、同じコードを実行するResizeボタンを置くと、機能します。どうして？

HTML：

<div ng-app="myapp"> 
    <div ng-controller="myctrl"> 
    <input ng-model="chart.title.text"> 
    <button ng-click="resize()">Resize</button> 
    <highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart> 
    </div> 
</div> 

JS：window.onresizeで

var myapp = angular.module('myapp', ["highcharts-ng"]); 

myapp.controller('myctrl', function($scope, $window) { 

    $scope.resize = function() { 
    $scope.chart.options.chart.width = $window.innerWidth; 
    } 
    $window.onresize = function() { 
    $scope.chart.options.chart.width = $window.innerWidth; 
    } 

    $scope.chart = { 
    options: { 
     chart: { 
     type: 'bar' 
     } 
    }, 
    series: [{ 
     data: [10, 15, 12, 8, 7] 
    }], 
    title: { 
     text: 'Hello' 
    } 
    } 
}); 

Answer 1

thisthisスコープを意味する$scope.toggleWidthとは逆に、チャートの設定オブジェクトを持たないグローバルwindowオブジェクトを指しチャートと一緒に。

チャートの設定は次のようにアクセスすることができます。

$window.onresize = function() { 
    var chart = $scope.chart.options.chart; 
    if (chart.width === 400) { 
     chart.width = 800 
    } else { 
     chart.width = 400 
    } 
    $scope.$digest(); 
}; 

手動$digest()を呼び出す必要がありさらにonResize。

例：http://jsfiddle.net/wscqtdvo/