Question

我正尝试在angular-ui标签内使用https://github.com/cmaurer/angularjs-nvd3-directives渲染折线图。

<tabset>
  <tab heading="tab1">
    <nvd3-line-chart data="exampleData"></nvd3-line-chart>
  </tab>
  <tab heading="tab2">
    <nvd3-line-chart data="exampleData2"></nvd3-line-chart>
  </tab>
</tabset>

第一个选项卡呈现图形，但是当我选择第二个选项卡时，图形不会呈现。一旦我调整窗口大小，图形就会出现，因为它会被window.resize上的指令重新呈现。

如何让标签B中的图表自动呈现？

（我已经尝试在标签更改时触发窗口调整大小事件。感觉非常脏并且无法正常工作）

Answer 1

我通过刷新所有图表来解决问题：

<tab select="refreshCharts()">

然后

$scope.refreshCharts = function () {
        for (var i = 0; i < nv.graphs.length; i++) {
            nv.graphs[i].update();
        }
    };

将图表更新为参数可能是一个好主意，以避免不必要的重绘。

Answer 2

您是否尝试过设置objectequality="true"？

请参阅此主题：https://github.com/cmaurer/angularjs-nvd3-directives/issues/177

在angular-ui选项卡中渲染nvd3-line-chart

2 个答案: