角度 highchart 和 ng-grid 标题不考虑帧宽度答案

【问题标题】：Angular highchart and ng-grid headers not respecting frame widths角度 highchart 和 ng-grid 标题不考虑帧宽度
【发布时间】：2015-02-17 21:17:57
【问题描述】：

我有几个使用 highcharts 插件和指令的图表，以及通过我的应用程序使用 ng-grid 的表格。在查看主页后直接查看带有图表或表格的页面时，图表和表格不考虑其框架宽度，并扩展为 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 = function (RevenueSlices) { var 公司名称；

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

【问题讨论】：

尝试在控制台中调用 window.resize()。 ng-grid 2.x 有一个立即渲染和非固定宽度的错误。如果这修复了渲染，那么可能会有一个快速的 hack 来修复它。
谢谢，当我将 window.resize() 放在超时为 2000 或更多的超时块中时，它会起作用，并且它还会闪烁扩展的网格/图表，因此不是理想的解决方案。我也尝试了您的教程之一中提出的 ng-if 解决方案，但无济于事。

标签： javascript css angularjs highcharts ng-grid

【解决方案1】：

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

在http://ui-grid.info/docs/#/tutorial/108_hidden_grids http://ui-grid.info/docs/#/tutorial/108_hidden_grids 的 ng-grid 教程中重点介绍了针对有类似问题的其他一些可能的解决方案：

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

使用 ng-if 防止网格在其所在的元素（tab/accordion/etc）处于活动状态之前呈现，就像在这个 plunker 中一样。

使用自动调整大小功能让网格根据需要自行重绘。这可能会导致一些闪烁，因为检查是以 250 毫秒为周期进行的。这是一个证明这一点的 plunker。

【讨论】：