Javascript 角度海图和ng网格标头不考虑帧宽度

我有几个利用highcharts插件和指令的图表，以及通过我的应用程序使用ng grid的表格。在查看主页后直接查看带有图表或表格的页面时，图表和表格不考虑其框架宽度，并扩展到1900px的宽度（请参见图：）。刷新页面一次后，图表和网格将按其应该的方式适合其框架。是什么导致了这个问题

下面的代码，请告诉我是否有其他代码会有所帮助。谢谢

其中一个违规页面的HTML：

<div class="col-md-7" id="chart">
    <div class="panel panel-default">
        <div class="panel-heading" ng-init="isCollapsed = false">
            <div class="panel-title">
                Top 8 Drugs by 2013 Revenue
                <button class="pull-right btn btn-xs" ng-click="isCollapsed = !isCollapsed"><span
                        class="text-center"
                        ng-class="{'fa fa-plus': isCollapsed, 'fa fa-minus': !isCollapsed}"></span></button>
            </div>
        </div>
        <div class="panel-body" collapse="isCollapsed" ng-if="Revenues[0].evaluate_productRevenue2013 > 0">
            <div class="col-xs-12" ng-cloak>
                <highchart id="company-chart-overview-1" config="chartConfig"></highchart>
            </div>
            <div class="row-fluid col-xs-offset-5">
                <div class='my-legend'>
                    <div class='legend-title'>RxScore Safety Indicator </div>
                    <div class='legend-scale'>
                        <ul class='legend-labels'>
                            <li><span style='background:#008000;'></span>Low</li>
                            <li><span style='background:#FFFF00;'></span></li>
                            <li><span style='background:#E69628;'></span></li>
                            <li><span style='background:#FF0004;'></span>High</li>
                        </ul>
                    </div>
                </div>
            </div>
         </div>
    </div>
</div>

ng网格选项：

var tmp = companyChartService.getOverviewChart(Revenues.slice(0, 8));
$scope.colDefs = companyGridService.getColDefs();
$scope.ToolTipper = tooltipService.getTooltip;

$scope.colDefs = companyGridService.getColDefs();

$scope.myData = Revenues;
$scope.gridOptions = {
    data: 'myData',
    enableSorting: true,
    enableColumnResize: true,
    showGroupPanel: true,
    enableCellGrouping: true,
    showColumnMenu: true,
    enablePinning: true,
    showFilter: true,
    jqueryUITheme: true,
    //cellClass: 'drugName',
    columnDefs: 'colDefs'
    //rowClass: 'drugName'
};

---

这个问题是由错误的css规则引起的，这些规则与ng class指令一起应用。css直到新状态加载后才被删除，因此即使它不可见，也会影响ng grid和highcharts用来确定其大小的页面宽度。在重写css并删除ng类之后，问题得到了解决

ng grid教程中重点介绍了针对类似问题的其他几种可能的解决方案：

为网格指定特定的高度和宽度，如下例所示

使用ng if防止网格在其所在的元素（tab/accordion/etc）处于活动状态之前被渲染，如本plunker中所示

使用自动调整大小功能，让网格根据需要重新绘制自身。这可能会导致一些闪烁，因为检查周期为250ms。 这里有一个plunker演示了这一点

---

尝试在控制台中调用window.resize（）。NGGrid2.x有一个错误，它具有即时渲染和非固定宽度。如果这样可以修复渲染，那么可能会有一个快速的黑客来修复它。谢谢，当我将window.resize（）放入一个超时为2000或更多的超时块中时，它会工作，并且它还会闪烁扩展的网格/图表，所以这不是一个理想的解决方案。我尝试过在你的一篇教程中提出的ng if解决方案，但也没有效果。

var tmp = companyChartService.getOverviewChart(Revenues.slice(0, 8));
$scope.colDefs = companyGridService.getColDefs();
$scope.ToolTipper = tooltipService.getTooltip;

$scope.colDefs = companyGridService.getColDefs();

$scope.myData = Revenues;
$scope.gridOptions = {
    data: 'myData',
    enableSorting: true,
    enableColumnResize: true,
    showGroupPanel: true,
    enableCellGrouping: true,
    showColumnMenu: true,
    enablePinning: true,
    showFilter: true,
    jqueryUITheme: true,
    //cellClass: 'drugName',
    columnDefs: 'colDefs'
    //rowClass: 'drugName'
};