当在另一个选项卡中时，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);
})

如果你将标记的部分移出show选项卡，图表将无法呈现-说明问题