5

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

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

第一个图表工作正常，但如果您向一侧滑动，标签会出现在轴线上方并移开视线。

我确定我在这里遗漏了一些明显的东西，所以任何帮助将不胜感激。

4

2 回答 2

15

$.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/

于 2012-09-20T15:19:04.457 回答
0

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

您设置了 DIV 元素的大小，您可以尝试设置绘图的确切大小吗？

于 2012-09-20T07:36:24.137 回答