css - angular-nvd3 图形在选项卡内容中的格式错误

Question

我想在我的网页上显示饼图和多条形图。我有一个控制器来为这些图表设置数据和选项。除了这些图表的格式之外，一切都很好。我有以下代码：

<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>

我有这个导航：

输出是：这是所需的。但是，当我单击导航“直方图”以查看另一张图时，我会得到以下信息：该图被挤压到屏幕的一侧。现在，如果我单击图形或不单击另一个按钮来重新加载数据，格式会发生如下变化：这是实际需要的。

在这里，如果我重新加载数据（我有一个按钮来执行此操作）并返回查看我的饼图，那么我会看到：我的饼图现在已被挤压。

当放置在选项卡内容之外时，每个图表都表现良好。我不知道为什么会这样。我需要一些建议。提前致谢。

Answer 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);

刷新图表可更正格式。