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

【问题标题】：rendering nvd3-line-chart inside angular-ui tab在 angular-ui 选项卡中渲染 nvd3-line-chart
【发布时间】：2014-05-30 13:55:03
【问题描述】：

我正在尝试在 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 中的图形自动呈现？

（我已经尝试在选项卡更改时触发窗口调整大小事件。感觉很脏并且不起作用）

【问题讨论】：

标签： javascript angularjs angular-ui nvd3.js redraw

【解决方案1】：

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

<tab select="refreshCharts()">

然后

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

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

【讨论】：

如果有人遇到这个问题，即使在选择选项卡后也没有调用函数，您也可以使用 ng-click="refreshCharts()"。

【解决方案2】：

您尝试设置objectequality="true" 吗？

请看这个帖子：https://github.com/cmaurer/angularjs-nvd3-directives/issues/177

【讨论】：