角度高图表和ng网格标题不考虑帧宽度

Angular highchart and ng-grid headers not respecting frame widths

本文关键字:不考虑 标题 ng 高图表 网格      更新时间:2023-12-31

我有几个使用highcharts插件和指令的图表,以及通过我的应用程序使用ng网格的表格。当在查看主页后直接查看带有图表或表格的页面时,图表和表格不考虑其边框宽度,并扩展到1900px的宽度(见图:https://i.stack.imgur.com/1NKhG.png)。刷新页面一次后,图表和网格将按照应有的方式适应其框架。是什么原因导致了这个问题?

下面的代码,让我知道是否有其他代码会有帮助。谢谢

其中一个违规页面的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 companyName;

    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网格选项:

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

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

对于那些有类似问题的人,另一些可能的解决方案在ng-grid教程中强调如下http://ui-grid.info/docs/#/tutorial/108_hidden_grids:

  1. 如下面的示例所示,为网格指定特定的高度和宽度
  2. 使用ng-if可以防止网格被渲染,直到它所在的元素(tab/accordinator等)处于活动状态,就像在这个plunker中一样
  3. 使用autoResize功能可以根据需要重新绘制网格。这可能会导致一些闪烁,因为检查是在250毫秒的周期。这是一个演示这个的plunker
相关文章: