1

我想在 jQuery 移动网络应用程序中创建图表。我正在使用jqPlot图表，但无法创建图表。我正在使用以下代码：

    <html>
    <head>
        <script type="text/javascript" src="@Url.Content("~/Scripts/app/jquery.mobile-1.0b2.min.js")"></script>
        <script type="text/javascript"src="@Url.Content("~/Scripts/jquery.jqplot.min.js")"></script>
        <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery.jqplot.min.css" )"/>
        <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.0b2.css")" />
        <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.0b2.min.css")" />

        <script type="text/javascript">
            $('#index').live('pageinit', function (event) {
                alert("jqplotchart");
                $.jqplot('container', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
            });
        </script>
    </head>
    <body>
        <div id="index" data-role="page">
            <div id="container" style="height: 400px; min-width: 600px">
            </div>
        </div>
    </body>
    </html>

为了检查 jQuery，我还在函数中添加了一个警报，但它也没有显示警报。也许是因为我pageinit()以错误的方式使用该事件？请建议我如何使用该pageinit()事件或者我是否需要使用其他事件来创建图表？

4

2 回答 2

0

这可能不再需要答案，但如果我几天前看到这个问题，我会发现答案很有用。

有两个问题：

  1. 在包含 jquery mobile javascript 之前，您需要包含“jquery.mobile-xxxmin.js”。
  2. jqPlot 不喜欢'pageinit'。您需要改用“pageshow”。
于 2012-10-17T10:10:01.033 回答
0

有一种更简单的方法（在我的情况下有效）：

-首先：在任何页面之外（例如在正文标签下方）删除您的绘图容器 div ：

<body>
<div id="plotContainer"></div>
...

-然后：在$(document).ready(function(){ ... here ... })中设置绘图（图表）；并隐藏它，使其不会在页面之间显示：

$("#jqxChart").jqxChart(settings);
$("#jqxChart").hide();

-最后：只需复制 div 与页面内的情节：

<script>
$('#page_ID').bind('pageshow', function(data) { 
$("#jqxChart").appendTo("#ID_of_DIV_you_want");
$("#jqxChart").show();  
$('#jqxChart').jqxChart('refresh');
});
</script>

希望这可以帮助！！！

于 2014-09-10T08:10:26.787 回答