Angularjs延遲加載chartjs當在另一個標籤

Question

我在這是不可能的頁面完全加載後，以顯示一個選項卡以下帆布：收集

<canvas class="chart chart-radar m-t-xs" data="level" labels="label"></canvas> 

此圖表的數據使用$http請求（這樣懶加載）。

現在，當頁面加載，如果我立即單擊該選項卡上，然後在圖上顯示，每個人都開心:)

但是，如果我（作爲普通用戶將）留在選項卡上時，數據加載進入圖表，然後更改選項卡圖表不可見（如它不是呈現）。

這不是我第一次遇到這個問題，並且希望有人在我身邊有同樣的體驗，並且瞭解解決方法嗎？

Answer 1

當您打開標籤頁時（您可以獲取所需的數據，只是在您的標籤頁打開之前不使用它來創建圖表）而不是之前 - 您可能需要創建圖表 - 懶得渲染圖表:-)

小提琴 - http://jsfiddle.net/3x7uu5eh/

這是顯示了我們的標籤內容，並繪製圖表

// this is our show tab 
$("#tabButton").bind("click", function() { 
    $("#tabPane").show(); 

    // move this section out of this function to see the issue 
    var ctx = $("#myChart").get(0).getContext("2d"); 
    var myLineChart = new Chart(ctx).Line(data); 
}) 

如果你移動所標記部分出展選項卡的部分，圖表贏得」 t渲染 - 說明問題。