Question

我正在尝试制作一张桌子和图表。当我同时展示两者时，两者都将占据100％的宽度。请全屏检查。但是，当我应用ng-show条件时，图表不会以100％宽度显示为什么？它只显示宽度的50％到60％。

请全屏查看并点击显示图表按钮..然后它只显示50％宽度..我应该100％..

这是我的代码 http://plnkr.co/edit/lXM2UbYUeT8NSkDeYCgb?p=preview

$scope.isshowTable = true;
$scope.showChart = function() {
    $scope.isshowTable = false;
}
$scope.showTable = function() {
    $scope.isshowTable = true;
}

Answer 1

只需更改图表指令样式，宽度=＆＃34; 100％＆＃34;，图表默认使用宽度。

http://plnkr.co/edit/HkAD1eyD1QGHIUyU7uml?p=preview

<chart value="basicAreaChart" type="area" height="400" style="width:100%"></chart>

原因如下，http://api.highcharts.com/highcharts#chart.width

width：Number图表的显式宽度。默认情况下，宽度为   根据包含元素的偏移宽度计算。试试吧：

800px宽

Answer 2

我认为这是因为你在开始时启动了图表，而$ scope.showChart只是为了确定是否显示图表。

启动图表后，它将基于当前宽度。

其中一个解决方案是在$ scope.showChart。

上再次启动图表

P.S。：有趣的是，如果在显示图表时更改框的宽度，它将再次变为100％宽度。可能是因为图表库中的响应式css。

div为什么不采用全宽或100％宽度？

2 个答案: