我想在我的网页上显示饼图和multiBar图表。我有一个控制器来设置这些图表的数据和选项。除了这些图表的格式化外,Everthing工作正常。我有以下代码:
<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>
输出为,这是所需的。但是只要我点击导航&#39;直方图&#39;为了看到另一张图,我得到了这个:此图表被挤压到屏幕的一侧。现在,如果我点击图表或不是另一个按钮来重新加载数据,格式化会改变如下:这是实际需要的。
如果我重新加载数据(我有一个按钮来执行此操作)并返回查看我的pieChart然后我看到:我的pieChart现在已经被挤压了。
每个图表在标签内容之外放置时表现良好。我不知道为什么会发生这种情况。我需要一些建议。提前谢谢。
答案 0 :(得分:1)
经过一番研究后,我发现如何纠正这个问题。这可以使用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>
在角度控制器中:
1)刷新函数内部的图形(即单击导航按钮时)
$scope.refreshHist = function(){
setTimeout(function(){
$scope.histApi.refresh();
},200);
};
$scope.refreshPie = function(){
setTimeout(function(){
$scope.pieApi.refresh();
},200);
刷新图表会更正格式。