Question

我尝试使用highcharts-ng内的Angular-grister Angular指令集成Highharts（仪表板/窗口小部件Angular指令）。

这是我的HTML：

<div ng-controller="myCtrl">
    <div gridster="gridsterOptions">
        <ul>
            <li gridster-item="item" ng-repeat="item in standardItems">
                <highchart id="chart1" config="chartConfig" class="chart"></highchart>
            </li>
        </ul>
    </div>
</div>

我的CSS样式：

body {
    color: #858584;
    background-color: #e0e0e0;
}
.gridster .gridster-item {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    color: #004756;
    background: #ffffff;
    padding: 10px;
}
.chart {
    border:1px #000 solid;
}

我的Angular应用程序：

var myApp = angular.module('myApp', ['gridster', 'highcharts-ng']);

myApp.controller('myCtrl', function ($scope) {
    $scope.gridsterOptions = {
        margins: [20, 20],
        columns: 4,
        rowHeight: 300,
        pushing: true,
        floating: true,
        swapping: true,
        resizable: {
            enabled: true
        },
        draggable: {
            enabled: true
        }
    };

    $scope.standardItems = [{
        sizeX: 2,
        sizeY: 1
    }, {
        sizeX: 2,
        sizeY: 1
    }];

    $scope.chartConfig = {
        options: {
            chart: {
                type: 'bar'
            }
        },
        series: [{
            data: [10, 15]
        }],
        title: {
            text: 'Hello'
        },

        loading: false
    };
});

使用gridster仪表板中的小部件会产生类似的结果：

有关响应式布局的问题有两个：

Highchart组件的高度始终为400 px。它们位于仪表板小部件内部，应与小部件具有相同的高度。目前，它们比仪表板小部件高，内容溢出。
渲染时，Highcharts组件比其容器宽。如果我调整窗口大小，它们会被重新绘制，现在宽度正确。

如何解决这些问题？

在JSFiddle上查看我的演示示例： http://jsfiddle.net/dennismadsen/xxy2uy9x/

Answer 1

我认为这与this one或this one问题重复。或者至少答案非常相似。

简而言之：呈现图表时，容器的宽度和高度为undefined或0（容器不是DOM的一部分或被display: none隐藏），结果在图表的默认宽度和高度。

解决方法是给浏览器（和角度）一个呼吸并在setTimeout（或$timeout）调用chart.reflow()以允许图表适应容器，请参阅：{{3 }}

$scope.chartConfig = {
    options: {
        chart: {
            type: 'bar',
            events: {
                load: function() {
                    var c = this;

                    setTimeout(function() {
                        c.reflow();
                    }, 123)
                }
            }
        }
    },
    series: [{
        data: [10, 15]
    }],
    title: {
        text: 'Hello'
    },

    loading: false
};

将Highcharts集成到Angular-gridster

1 个答案: