6

Angular アプリでは、HighCharts の実装に highcarts-ng を使用しています。

動作するグラフの最大化および最小化機能は次のとおりです。

function expandChartPanel() {
    vm.chartMaxed = !vm.chartMaxed;

    viewHeader = ScopeFactory.getScope('viewHeader');
    highChart  = ScopeFactory.getScope('highChart');

    var chart = highChart.chartObject;
    var highChartContainer       = document.getElementById("highchart-container");
    var highChartContainerWidth  = document.getElementById('highchart-container').clientWidth;
    var highChartContainerHeight = document.getElementById('highchart-container').clientHeight;

    var windowWidth  = window.innerWidth;
    var windowHeight = window.innerHeight;

    if (vm.chartMaxed) {

        vs.savedWidth  = highChartContainerWidth;
        vs.savedHeight = highChartContainerHeight;

        console.log('savedWidth  = ', vs.savedWidth);
        console.log('savedHeight = ', vs.savedHeight);

        root.chartExpanded          = true;
        viewHeader.vh.chartExpanded = true;
        highChart.highChartMax      = true;

        highChartContainerHeight = document.getElementById('highchart-container').clientHeight;
        windowWidth  = window.innerWidth;
        windowHeight = window.innerHeight;

        highChart.chartConfig.size.width  = windowWidth;
        highChart.chartConfig.size.height = windowHeight - 220;

        chart.setSize(windowWidth, windowHeight - 220);
    }
    else {
        root.chartExpanded          = false;
        viewHeader.vh.chartExpanded = false;
        highChart.highChartMax      = false;

        highChart.chartConfig.size.width  = vs.savedWidth;
        highChart.chartConfig.size.height = vs.savedHeight;

        chart.setSize(vs.savedWidth, vs.savedHeight);
    }

    highChart.restoreChartSize();
}

リフロー機能は次のとおりです。

function restoreChartSize() {
    console.log('restoreChartSize');
    if (!vs.chartObject.reflowNow) {
        vs.chartObject.reflowNow = vs.chartObject.reflowNow = function() {
            this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height');
            this.containerWidth  = this.options.chart.width  || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width');
            this.setSize(this.containerWidth, this.containerHeight, true);
            this.hasUserSize = null;
        }
     }

     vs.chartObject.reflowNow();
}

上記のリフロー関数は、このjsFiddleでは完全に機能しますが、アプリでは機能しません。

HighChartsDirective ファイルの完全な Gist ファイル。

[最大化] をクリックすると、グラフはブラウザー ウィンドウのフル サイズに拡大されますが、ドラッグしてブラウザー ウィンドウのサイズを変更した後、restoreChartSize関数を呼び出してリフローを有効にします。

ただし、グラフのサイズは自動サイズ 100% 100% にはならず、グラフの前のサイズに戻ります :(

最大化前: ここに画像の説明を入力

最大化機能の後:

ここに画像の説明を入力

ブラウザウィンドウのサイズを変更した後：

window.onresize = function(event) {
    console.log('window resizing...');
    highChart = ScopeFactory.getScope('highChart');
    highChart.restoreChartSize();
    console.log('highChart.chartConfig = ', highChart.chartConfig);
};

ここに画像の説明を入力

^ 自動サイズ 100% ではなく、より小さい静的サイズに戻る

4

2 に答える 2

3

最終的に、私が機能できる唯一の代替ソリューションを見つけましたが、実際には非常にシンプルで簡単に実行できました。他の誰かがこれの修正を探している場合に備えて、役に立ち、問題を解決したリソースへのリンクを次に示します。

config.series または config.options と同じレベルで、これをチャート構成オブジェクトに追加するだけです。コメントは情報を参照していますが、私にとってうまくいった実際の解決策は、ここで $timeout を 0 秒で使用しています

*highcharts-ng明らかに使用するため

http://plnkr.co/edit/14x7gfQAlHw12XZVhWm0?p=プレビュー

$scope.chartConfigObject = {

    // 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);
    }
};
于 2016-03-10T18:38:55.010 に答える