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

Question

我使用ui-chart angularjs模块来显示折线图，当我将它放在ui-bootstrap标签中时，它只显示第一个标签上的折线图，它不显示在第二个或第三个标签。

当我读到jqPlot documentation（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 部分非常重要，因为重新绘制图表是一项重量级操作。