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

Posted 2023-03-11

【中文标题】角度 highchart 和 ng-grid 标题不考虑帧宽度

【英文标题】：Angular highchart and ng-grid headers not respecting frame widths

【发布时间】：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 解决方案，但无济于事。

【参考方案1】：

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

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

为网格指定特定的高度和宽度，如下例所示。 使用 ng-if 防止网格在其所在的元素（tab/accordion/etc）处于活动状态之前呈现，就像在这个 plunker 中一样。 使用自动调整大小功能让网格根据需要自行重绘。这可能会导致一些闪烁，因为检查是以 250 毫秒为周期进行的。 这是一个证明这一点的 plunker。