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，所以你只需使用委托给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...
    }
});

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

1 个答案: