Question

我在选项卡中有以下画布，页面完全加载后无法显示：

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

此图表的数据是使用$http请求收集的（因此延迟加载）。

现在当页面加载时，如果我立即点击选项卡，那么图表显示并且每个人都很高兴：）

但是，如果我（作为普通用户）在数据加载到图表中时保留在选项卡上然后更改选项卡，则图表不可见（就像它不呈现一样）。

这不是我第一次遇到这个问题，并且希望那里的人有与我一样的体验并且知道一个解决方法吗？

Answer 1

您需要在打开选项卡时创建图表（您可以获取所需的数据，在打开选项卡之前不要使用它来创建图表）而不是之前 - 所以基本上，懒惰渲染您的图表： - ）

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

这是显示我们的标签内容AND绘制图表的部分

// 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);
})

如果您将标记的部分移出展示标签，则图表不会呈现 - 说明问题。

Angularjs在另一个选项卡中延迟加载chartjs

1 个答案: