将Highcharts集成到Angular-gridster中

Question

我正在尝试使用Angular-grister(仪表板/小部件Angular指令)中的highcharts-ng 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>

我的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仪表板中的小部件可以得到类似的结果:

响应式布局有两个问题:

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

我该如何解决这些问题？

请参阅我在JSFiddle上的演示示例:http: //jsfiddle.net/dennismadsen/xxy2uy9x/