Question

想知道是否有人能够将Dygraph与jquery mobile一起使用。假设我定义了以下页面：

<html>
  <head>
    <title>Testing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="/js/dygraph-combined.js"></script>
  </head>
  <body>
    <div class="page" data-role="page">
      <div class="header" data-role="header">
        <h1>Header</h1>
      </div>
      <div class="ui-content" data-role="main">
        <div id="graph" style="border:1px solid"></div>
      </div>
      <div class="footer" data-role="footer">
        <h1>Footer</h1>
      </div>
    </div>
  </body>
</html>
<script type='text/javascript'>
  //<![CDATA[
    new Dygraph(document.getElementById("graph"), //"http://localhost:8081/twenty20/scores");
        "Date,Temperature\n" +
            "2008-05-07,75\n" +
            "2008-05-08,70\n" +
            "2008-05-09,80\n");

  //]]>
</script>

图表未显示。我所看到的只是一个空白的div。但如果我用

替换身体

 <body>
    <div id="graph"></div>
  </body>

这很好用。

可能与我创建Dygraph对象的时间有关吗？

Answer 1

对于jQuery Mobile，您应该使用他们记录的页面结构以及他们在页面准备就绪时提供的事件：

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>Main Page</h1>
    </div> 
    <div role="main" class="ui-content" >
        <div id="graph"></div>
    </div>
</div>

使用CSS设置图表大小：

#graph { height: 300px; }

在JavaScript中，似乎pagecreate，pagebeforeshow不适用于dygraph，因此您可以使用pageshow或呈现页面后的其他事件：

var g1;
$(document).on("pageshow", "#page1", function(){
    if (!g1){
        g1 = new Dygraph(document.getElementById("graph"),         
            "Date,Temperature\n" +
            "2008-05-07,75\n" +
            "2008-05-08,70\n" +
            "2008-05-09,80\n");       
    }
});

这是 DEMO

Dygraph在jquery mobile上不可见

1 个答案: