JQuery Mobile+ChartJS:只在调整大小后显示响应条形图

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

本文关键字：显示 响应 条形图 调整 Mobile+ChartJS JQuery      更新时间：2023-09-26

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

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

图表必须显示在第二页上，并且必须具有响应性。在我的示例中，如果将responsive : true更改为false，它将像符咒一样工作。

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

有人猜测为什么会发生这种情况吗？我为#pagetwo尝试过不同的JQM事件，但都没有成功。

非常感谢！

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

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

使用ui参数可以查看正在显示的页面（ui.toPage）。

演示

对于jQM1.3，没有页面容器，所以您只使用委托给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...
    }
});
相关文章：