AngularJS ui-chart在ui-bootstrap选项卡中不起作用

Question

我使用ui-chart angularjs模块显示折线图，问题是当我将其放在ui-bootstrap选项卡中时，它仅在第一个选项卡中显示折线图，而不会在第二个或第三个选项卡中显示。

当我阅读jqPlot文档 （ui-chart是jqPlot的指令）时，它说它需要使用replot（），但是我不知道如何在ui-chart中实现它。

有人可以给我提个醒吗？

Answer 1

您是否包括了所需的所有插件？ 您需要为每个图包括适当的插件。 我很多次忘记了。 否则，我认为我们可能需要代码进行更多调查。 例如画一个饼，您必须包括：

<script src=".../jqplot/plugins/jqplot.pieRenderer.js" type="text/javascript"></script>

此外。

Answer 2

通过修改ui-chart指令，并在其末尾添加以下内容，我设法实现了这一点：

var plot = $.jqplot(elem.attr('id'), data, opts);

// search for a tabpanel (jquery-ui tabs) containing the chart
elem.closest('.tabpanel').bind('tabsactivate',
    function(event, ui) {
        if (plot._drawCount === 0) {
            plot.replot();
        }
});

if _drawCount部分非常重要，因为重新部署图表是一项繁重的操作。