jquery mobile and flot library

问题

I am implementing flot in a small jquery mobile framework site. The page / content div that contains the flot is on a secondary page. The first time the flot page is shown, the chart renders nicely. Moving back to the primary page and forward again to the flot page, the chart does not render.

The content is coming from an asp mvc view:

<div id="chartcontainer">
    <div id="chartdiv" style="height:300px;width:400px;"></div>
</div>
<script type="text/javascript">
$(function () {
    var d1 = [[1, 1], [2, 2], [3, 3]];
    $.plot($("#chartdiv"), [d1]);
});
</script> 

回答1:

You might need to refresh the page, try .page()

$.plot($("#chartdiv"), [d1]).page();

回答2:

document ready is generally a thing that doesn't work as expected with jQuery Mobile.

instead of $(function(){}) try binding to a page* event like this:

$('div#withMYgrid').live('pageshow',function(){
//plot here
});

来源：https://stackoverflow.com/questions/5812709/jquery-mobile-and-flot-library