Jquery mobile Jquery mobile在子页面中显示图表_Jquery Mobile_Cordova_Charts

Jquery mobile Jquery mobile在子页面中显示图表

jquery-mobile cordova charts

Jquery mobile Jquery mobile在子页面中显示图表,jquery-mobile,cordova,charts,Jquery Mobile,Cordova,Charts,我想在我的多页Jquery移动应用程序的第二页上显示rgraph条形图。下面是我的代码结构 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jqu

我想在我的多页Jquery移动应用程序的第二页上显示rgraph条形图。下面是我的代码结构

  <!DOCTYPE html>
  <html>
  <head>
  <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 type="text/javascript" src="rgraph/libraries/RGraph.common.core.js"></script>
    <script type="text/javascript" src="rgraph/libraries/RGraph.bar.js"></script>
    <script src="rgraph/libraries/RGraph.gauge.js"></script> 
    <script src="rgraph/libraries/RGraph.cornergauge.js"></script>
    <script src="rgraph/libraries/RGraph.common.dynamic.js"></script>
  </head>
  <body>

  <div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
  <p>Welcome! If you click on the link below, it will take you to Page Two.</p>
  <a href="#pagetwo">Go to Page Two</a>
  </div>

 <div data-role="footer">
  <h1>Footer Text</h1>
</div>
</div> 

  <div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
   </div>

  <div data-role="main" class="ui-content">
   // My chart should come here

  <canvas id="cvs" width="500" height="250">[No canvas support]</canvas>

   <script>
    $(document).ready(function ()
    {
        var data = [[4,5,3],[4,8,6],[4,2,4],[4,2,3],[1,2,3],[8,8,4],[4,8,6]];

        var bar = new RGraph.Bar('cvs', data)
            .set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
            .set('labels.above', true)
            .set('colors', ['red','yellow', 'pink'])
            .set('bevel', !RGraph.ISOLD)
            .set('grouping', 'stacked')
            .set('strokestyle', 'rgba(0,0,0,0)')
            .draw();
    })
</script>


 <a href="#pageone">Go to Page One</a>
 </div>

<div data-role="footer">
 <h1>Footer Text</h1>
 </div>
 </div> 

 </body>
 </html>


欢迎来到我的主页
欢迎光临！如果你点击下面的链接，它会把你带到第二页
页脚文本
欢迎来到我的主页
//我的图表应该在这里
[无画布支持]
$（文档）.ready（函数（）
{
var数据=[[4,5,3]，[4,8,6]，[4,2,4]，[4,2,3]，[1,2,3]，[8,8,4]，[4,8,6]；
var bar=新的RGraph.bar（'cvs'，数据）
.set（'标签'，['星期一'，'星期二'，'星期三'，'星期四'，'星期五'，'星期六'，'星期日']））
.set（'labels.over'，true）
.set（'颜色'，['红色'，'黄色'，'粉色'）
.set（'斜面'，！RGraph.ISOLD）
.set（'分组'，'堆叠'）
.set（'strokestyle'，'rgba（0,0,0,0'））
.draw（）；
})
页脚文本

但图表显示在第一页（主页面）。Jquery mobile Document.ready函数是否适用于子页？如果不适用，我应该更改什么以使其生效。请帮助对于Jquery mobile，不要使用

$（文档）。ready（函数（）…

。请改用提供的页面和/或页面容器事件。例如，您可以将脚本放在html的底部（所有页面标记之外）和第二页的

pagecreate

事件中：

$(document).on("pagecreate", "#pagetwo", function(){

        var data = [[4,5,3],[4,8,6],[4,2,4],[4,2,3],[1,2,3],[8,8,4],[4,8,6]];

        var bar = new RGraph.Bar('cvs', data)
            .set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
            .set('labels.above', true)
            .set('colors', ['red','yellow', 'pink'])
            .set('bevel', !RGraph.ISOLD)
            .set('grouping', 'stacked')
            .set('strokestyle', 'rgba(0,0,0,0)')
            .draw();

});

这是一个正在工作的

你的代码运行得很好，我已经尝试了你的代码，字符在第二页上，正如你所希望的。