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部分非常重要，因為重新部署圖表是一項繁重的操作。