Question

我想在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()事件或是否需要使用其他事件来创建图表？

Answer 1

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

有两个问题：

在包含jquery移动javascript之前，您需要包含“jquery.mobile-x.x.x.min.js”。
jqPlot不喜欢'pageinit'。您需要改为使用“pageshow”。

Answer 2

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

- 优先：在任何页面之外（例如 body 标记下方）绘制容器div ：

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

- 然后：在 $（文档）.ready（function（）{... 此处 ...}中设置图表（图表））; 并隐藏它，使其不会在页面之间显示：

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

- finaly：只需在页面内复制div：

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

希望这有帮助!!!

如何在jquery移动Web应用程序中使用jqplot图表

2 个答案: