рендеринг nvd3-line-chart внутри вкладки angular-ui

Я пытаюсь отобразить линейную диаграмму, используя https://github.com/cmaurer/angularjs-nvd3-directives внутри вкладки angular-ui.

<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 redraw angular-ui nvd3.js
person JasperZelf    schedule 30.05.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я решил проблему, обновив все графики:

<tab select="refreshCharts()">

а потом

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

Возможно, будет хорошей идеей передавать графики для обновления в качестве аргументов, чтобы избежать ненужных перерисовок.

person Ivan    schedule 07.09.2014
comment
Если кто-то столкнется с этой проблемой, когда функция не вызывается даже после выбора вкладки, вы также можете использовать ng-click=refreshCharts(). - person K K; 18.08.2015

arrow_upward
0
arrow_downward

Вы пытались установить objectequality="true" ?

См. эту тему: https://github.com/cmaurer/angularjs-nvd3-directives/issues/177

person Union find    schedule 01.06.2014