Javascript jquerymobile+；ChartJS：仅在调整大小后显示响应条形图

我一直在尝试将带有chart.js的响应条形图添加到我的一个JQM项目中

这就是我所做的：

图表必须显示在第二页，并且必须是响应性的。在我的示例中，如果将

responsive:true

更改为

false

，它将像一个符咒一样工作

如果

responsive

设置为

true

，单击按钮后将看不到任何内容，但如果调整屏幕大小，图表将神奇地出现

猜猜为什么会这样？我为

#pagetwo

尝试了不同的JQM事件，但没有成功

---

多谢各位

在jQM 1.4中，您将使用新的pagecontainer小部件的事件来确保页面已绘制，并且响应图表的所有维度都可用于计算其宽度：

$( "body" ).on( "pagecontainershow", function( event, ui ) {
    if (ui.toPage.prop("id") == "pagetwo"){
        //show chart code here
    }
});

您可以使用ui参数查看正在显示的页面（

ui.toPage

）

对于jQM 1.3，没有pagecontainer，因此您只需使用委派给yoyr图表页面的

pageshow

事件：

$(document).on( "pageshow", "#pagetwo", function() {
    //show chart code here
});

使用show事件，您现在可以在每次显示页面时绘制图表。如果图表在访问页面之间没有变化，则可以在绘制图表后为图表保留一个全局javascript变量，并检查是否需要在每次访问时绘制：

var barChart;
$(document).on( "pageshow", "#pagetwo", function() {
    if (barChart == null){
       //draw if barchart is null 

       window.barChart = new Chart(ctx).Bar(data...
    }
});

---

当页面可见且其中的所有元素都已接收到维度且Omar正确时，需要使用事件。如果您不想在以后的访问中重新绘制图表，您可以检查图表是否已创建：谢谢@Omar，它可以工作。我看到这是JQM 1.4的一个全新事件。猜猜如何解决我以前JQM版本的问题？谢谢谢谢@ezanker，我会在我的项目中记住这一点。对于1.3版，请使用

pageshow

。您现在已经10公里了，尽情享受吧；）