javascript - 将 Highcharts 集成到 Angular-gridster

Question

我正在尝试使用 highcharts-ng 来集成 Highharts内部的 Angular 指令 Angular-grister (仪表板/小部件 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 仪表板中的小部件会产生类似这样的结果:

响应式布局有两个问题:

1. Highchart 组件的高度始终为 400 像素。它们位于仪表板小部件内，并且应该与小部件具有相同的高度。目前，它们比仪表板小部件更高，而且内容过多。
2. 渲染时，Highcharts 组件比它们的容器宽。如果我调整窗口大小，它们将被重新绘制并且宽度现在是正确的。

我该如何解决这些问题？

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

Answer 1

我认为这是 this one 的副本或 this one问题。或者至少答案非常相似。

简而言之:呈现图表时，容器的宽度和高度为未定义或0(容器不是DOM的一部分或被隐藏display: none)，这会导致图表的默认宽度和高度。

解决方法是让浏览器(和 Angular)喘口气，然后在 setTimeout(或 $timeout)中调用 chart.reflow() 来允许图表适应容器，请参阅:http://jsfiddle.net/xxy2uy9x/5/

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