angular-nvd3 图表在 tab-content 中时格式错误
angular-nvd3 graphs' bad formatting when placed inside tab-content
我想在我的网页上显示饼图和多条形图。我有一个控制器来为这些图表设置数据和选项。除了这些图表的格式外,一切都很好。我有以下代码:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#pieChart">Pie Chart</a></li>
<li><a data-toggle="tab" href="#multiBarGraph">Histogram</a></li>
</ul>
<div class="tab-content">
<div id="pieChart" class="tab-pane fade in active">
<nvd3 options='histOptions' data='histData'></nvd3>
<p>Pie Chart</p>
</div>
<div id="multiBarGraph" class="tab-pane fade">
<p>multiBarGraph</p>
<nvd3 options='histOptions' data='histData' style="height:600px;"></nvd3>
</div>
</div>
我有这个用于导航:
输出是: which is as desired. But as soon as i click on the navigation 'Histogram' to see another graph, I get this: This graph is squeezed to one side of the screen. Now if I click on the graph or not another button to reload the data, the formatting changes like this: 这就是实际需要的。
在这里,如果我重新加载数据(我有一个按钮可以执行此操作)并返回查看我的饼图,然后我会看到:我的饼图现在已被压缩。
每个图形在放置在选项卡内容之外时都表现良好。我不知道为什么会这样。我需要一些建议。提前致谢。
经过一番研究,我找到了解决此问题的方法。这可以使用 nvd3
的 refresh() 函数来解决
代码:
在 html 文件中:
1)在导航按钮上添加点击功能
<li class="active"><a data-toggle="tab" href="#pieChart" ng-click="refreshPie()">Pie Chart</a></li>
<li><a data-toggle="tab" href="#multiBarGraph" ng-click="refreshHist()">Histogram</a></li>
2)将api添加到每个图
<nvd3 options='histOptions' data='histData' api="histApi"></nvd3>
<nvd3 options='histOptions' data='histData' api="pieApi"></nvd3>
在 angular 控制器中:
1)函数内刷新图表(即点击导航按钮时)
$scope.refreshHist = function(){
setTimeout(function(){
$scope.histApi.refresh();
},200);
};
$scope.refreshPie = function(){
setTimeout(function(){
$scope.pieApi.refresh();
},200);
刷新图形可更正格式。
我想在我的网页上显示饼图和多条形图。我有一个控制器来为这些图表设置数据和选项。除了这些图表的格式外,一切都很好。我有以下代码:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#pieChart">Pie Chart</a></li>
<li><a data-toggle="tab" href="#multiBarGraph">Histogram</a></li>
</ul>
<div class="tab-content">
<div id="pieChart" class="tab-pane fade in active">
<nvd3 options='histOptions' data='histData'></nvd3>
<p>Pie Chart</p>
</div>
<div id="multiBarGraph" class="tab-pane fade">
<p>multiBarGraph</p>
<nvd3 options='histOptions' data='histData' style="height:600px;"></nvd3>
</div>
</div>
我有这个用于导航:
输出是:
在这里,如果我重新加载数据(我有一个按钮可以执行此操作)并返回查看我的饼图,然后我会看到:
每个图形在放置在选项卡内容之外时都表现良好。我不知道为什么会这样。我需要一些建议。提前致谢。
经过一番研究,我找到了解决此问题的方法。这可以使用 nvd3
的 refresh() 函数来解决代码:
在 html 文件中:
1)在导航按钮上添加点击功能
<li class="active"><a data-toggle="tab" href="#pieChart" ng-click="refreshPie()">Pie Chart</a></li>
<li><a data-toggle="tab" href="#multiBarGraph" ng-click="refreshHist()">Histogram</a></li>
2)将api添加到每个图
<nvd3 options='histOptions' data='histData' api="histApi"></nvd3>
<nvd3 options='histOptions' data='histData' api="pieApi"></nvd3>
在 angular 控制器中:
1)函数内刷新图表(即点击导航按钮时)
$scope.refreshHist = function(){
setTimeout(function(){
$scope.histApi.refresh();
},200);
};
$scope.refreshPie = function(){
setTimeout(function(){
$scope.pieApi.refresh();
},200);
刷新图形可更正格式。