角度高图表和ng网格标题不考虑帧宽度
Angular highchart and ng-grid headers not respecting frame widths
我有几个使用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:
- 如下面的示例所示,为网格指定特定的高度和宽度
- 使用ng-if可以防止网格被渲染,直到它所在的元素(tab/accordinator等)处于活动状态,就像在这个plunker中一样
- 使用autoResize功能可以根据需要重新绘制网格。这可能会导致一些闪烁,因为检查是在250毫秒的周期。这是一个演示这个的plunker
相关文章:
- 使用Dnamics CRM 2011中的JavaScript读取子网格的所有记录,而不考虑活动页面
- 在BoilerplateJS浏览器加载所有脚本(在其他模块中),而不考虑激活的模块
- JS toLocaleString始终显示货币符号,而不考虑区域设置
- 在呈现网页时复制网页,而不考虑参考底图的来源
- 如何使用 javascript 获取 UTC 格式的日期,而不考虑当前系统日期
- 转换 JSON 日期,不考虑时区
- 使用XPath选择包含文本的节点,而不考虑CasperJS中的空白
- 使用简单的角度滤波器来替换输入字符串中某些字符串的所有出现,而不考虑大小写和空格
- 角度高图表和ng网格标题不考虑帧宽度
- jQuery/JavaScript代码如何将表导出为CSV文件而不考虑表's大小.看看@jsfiddle链接
- 捕获给定类型的所有事件,而不考虑气泡/目标
- 选项卡分组和选项卡着色:如何将此功能应用于从我的网页打开的选项卡,而不考虑浏览器
- CSS不透明度转换;在动画过程中不考虑覆盖不透明度
- 如何编辑此代码以获取图像而不是标题
- 如何增加光滑块高度,而不考虑其内容
- 正则表达式不考虑 .在JavaScript中进行模式测试时
- $browser.notifyWhenNoOutoutstanding Requests不考虑控制器功能
- getAttribute('href') 始终返回“#”,而不考虑移动浏览器上的实际 href 属性
- 如果我的网站在iframe中,我不希望标题显示在任何页面中
- Javascript 获取当前日期,而不考虑时区