Angular highchart 和 ng-grid headers 不考虑框架宽度

Question

我有几个图表使用 highcharts 插件和指令，tables 通过我的应用程序使用 ng-grid。查看主页后直接查看带有图表或 table 的页面时，图表和 table 不遵守其框架宽度，并扩展到 1900px 的宽度（见图：http://i.imgur.com/6uDrZBc.png?1).刷新页面一次后，图表和网格会按应有的方式适合其框架。是什么导致了这个问题？

下面的代码，让我知道是否有任何其他代码有帮助。谢谢。

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>

Highcharts 配置：

exports.getOverviewChart = 函数 (RevenueSlices) { 变种公司名称；

    var Series = [
        {name: 'Revenue ($MM USD)', data: [], type: 'column'}
    ];
    var cCategories = [];
    var colors = ['green', 'yellow', '#CD7D0F', 'red'];
    var thresholds = [47.17, 55.81, 61.83, 82.83];
    var cleanSlices = _.reject(RevenueSlices, function (sl) {
        return sl.BrandName === "Unknown";

    });

    cleanSlices = _.filter(cleanSlices, function (cs) {
        return Math.abs(cs.evaluate_productRevenue2013) > 0;
    });

    angular.forEach(cleanSlices, function (o) {
        var s = Math.abs(o.metric_rxscore);
        var color;
        if (s >= thresholds[2]) {
            color = colors[3];
        } else if (s >= thresholds[1]) {
            color = colors[2];
        } else if (s >= thresholds[0]) {
            color = colors[1];
        } else if (s >= 1) {
            color = colors[0];
        } else {
            color = 'lightgrey';
        }

        companyName = o.parent;
        cCategories.push(o.BrandName);
        Series[0].data.push({name: o.BrandName, color: color, y: Math.abs(o.evaluate_productRevenue2013)});
    });
   var overviewChart = {
        options: {
            chart: {
                type: 'StockChart'
            }, legend: {
                enabled: false
            },


            exporting: {
                enabled: false
            },
            plotOptions: {
                series: {
                    stacking: ''
                }
            }
        },
        size: {
            // width: 573,
            height: 380
        },
        xAxis: {
            title: {
                text: 'Drug'
            },
            categories: cCategories
        },
        yAxis: {
            title: {
                text: '2013 Revenue'
            },
            labels: {
                format: '{value} $MM USD'
            }


        }, credits: {
            enabled: false
        },
        series: Series,
        title: {
            style: { 'display': 'none' }
        }

    };


    return  overviewChart;

};

ng-grid 选项：

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

Answer 1

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

在此处的 ng-grid 教程中突出显示了针对具有类似问题的人的其他一些可能的解决方案 http://ui-grid.info/docs/#/tutorial/108_hidden_grids:

Give the grid a specific height and width as in the example below.

Use an ng-if to prevent the grid from being rendered until the element it is in (tab/accordion/etc) is active, as in this plunker.

Use the autoResize feature let the grid redraw itself as needed. This may cause some flickering as the check is on a 250ms cycle. Here's is a plunker demonstrating this.

Angular highchart 和 ng-grid headers 不考虑框架宽度

Angular highchart and ng-grid headers not respecting frame widths

javascript

css

highcharts

angularjs

ng-grid