Javascript 将海图集成到角网格中

我试图使用内部的Angular指令（仪表板/小部件Angular指令）集成Highharts

这是我的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>

还有我的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组件比其容器更宽。如果我调整窗口的大小，它们将被重新绘制，并且宽度现在是正确的

如何解决这些问题

请参阅我在JSFIDLE上的演示示例：

---

我认为这是一个重复的问题。或者至少答案非常相似

简而言之：呈现图表时，容器的宽度和高度是

未定义的

或

0

（容器不是DOM的一部分，或被

显示：无

隐藏），这将导致图表的默认宽度和高度

解决方法是让浏览器（和角度）呼吸，并在

setTimeout

（或

$timeout

）中调用

chart.reflow（）

以使图表适应容器，请参阅：

---

非常感谢。HighChart组件的高度如何？我不确定gridster-您在哪里设置的高度<代码>行高外观似乎不起作用：？或者当应用

行高

时，可能存在一些限制（浏览器宽度）？无论如何，如果

reflow（）

不起作用，请尝试

chart.setSize（width，height）

。我正在使用

$scope.gridsterOptions.rowHeight设置高度。在我的例子中，300像素。包括边距/填充，因此最终小部件高度约为280 px。Highcharts在这些小部件中，但它们的高度为400像素。那么，您是否尝试按照我的建议调用
chart.setSize（width，height）
？
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
    };
});

$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
};