Question

我一直在努力建立一个使用JQuery Mobile和Flot的网站。我们的想法是它可以显示您可以在其间滑动的图形。

到目前为止，我已经得到了这个：http://lasmit.co.uk/tmm-graphs/graph2.php

第一张图表运行正常，但如果您向侧面滑动，标签会显示在轴线上并向外看。

我确信我错过了一些明显的东西，所以任何帮助都会非常感激。

Answer 1

当您在当前不可见的内容上调用$.plot时，Flot无法正常工作。您最好的选择是将您的第2页和第3页图移动到pageshow个事件：

$('#device2').bind('pageshow',function(){    
  $.plot($("#total-inches-graph"), 
    [{  color: "rgb(14, 91, 173)", label: 'Total Measurements', data: totalInchesArray }] , 
    { xaxis: { mode: "time", timeformat: "%a" ,minTickSize: [1, "day"] } });
});

$('#device3').bind('pageshow',function(){    
  $.plot($("#weight-graph"), 
    [{  color: "rgb(32, 140, 47)", label: 'Weight', data: weightArray }] , 
    { xaxis: { mode: "time", timeformat: "%a" ,minTickSize: [1, "day"] } });
});

我在这里做了一个工作示例：http://jsfiddle.net/ryleyb/yZuZb/

Answer 2

滑动似乎有问题，因为当直接访问页面时，绘图正确呈现，例如打开以下URL： http://lasmit.co.uk/tmm-graphs/graph2.php#device2，但其他页面的呈现方式不正确。

您可以设置DIV元素的大小，是否可以尝试设置图的确切大小？

为什么我的Flot y轴标签出现在轴上？ JQM

2 个答案: