javascript - JQuery Mobile + ChartJS : Responsive Bar Chart displayed only after resizing

Question

我一直在尝试使用 Chart.js 将响应式条形图添加到我的一个 JQM 项目中。

这就是我所做的:http://jsfiddle.net/mauriciorcruz/1pajh3zb/3/

图表必须显示在第二页上并且必须是响应式的。在我的示例中，如果您将 responsive : true 更改为 false，它会非常有效。

如果 responsive 设置为 true，单击按钮后您什么也看不到，但如果您调整屏幕大小，图表将神奇地出现。

猜猜为什么会这样？我为 #pagetwo 尝试了不同的 JQM 事件，但没有成功。

非常感谢!

Answer 1

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

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

您可以使用 ui 参数查看正在显示的页面 (ui.toPage)。

DEMO

对于 jQM 1.3，没有 pagecontainer，因此您只需使用委托(delegate)给 yoyr 图表页面的 pageshow 事件:

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

DEMO

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

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

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