jqplot 与 jquerymobile 冲突答案

【问题标题】：jqplot conflict with jquerymobilejqplot 与 jquerymobile 冲突
【发布时间】：2011-12-06 09:25:43
【问题描述】：

在同一个 html 页面中，我需要使用 jquerymobile (www.jquerymobile.com) 并使用 jqplot js 库 (www.jqplot.com) 绘制一个简单的图表。

我认为 jqplot 和 jquerymobile 之间存在冲突问题，因为图表未显示。但是，如果我评论 jquerymobile 脚本，图表就会变得可见。

这是我的 html 代码的一部分：

[...head...]
<link rel="stylesheet" type="text/css" href="jquery.jqplot.1.0.0b2_r792/dist/jquery.jqplot.css" /> 

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0/jquery.mobile-1.0.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.1.0.0b2_r792/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> 

[...script...]
$(document).ready(function () {
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

[...body...]
<div class="jqplot" id="chart1" style="height:300px;width:400px;"></div>

有什么克服冲突的建议吗？也许我想念什么？

提前致谢， M.

【问题讨论】：

标签： javascript jquery jquery-mobile jqplot

【解决方案1】：

这是一个常见问题，解决方法有问题...

不要使用 jquerymobile 准备好的文档，使用 pageInit()

在 jquery 论坛中找到了这个帖子，它适用于静态数据，但我从来没有通过 jquerymobile 上的 json 调用使其适用于 jqplot。

http://forum.jquery.com/topic/ajax-problem-jquery-mobile-with-jqplot

祝你好运！

【讨论】：

【解决方案2】：

我喜欢 jqplot，与 jqmobile 一起使用试试这个试试这个：

<script>
 $('#thirdpage').live('pageshow', function() {
   $.jqplot('chart1',  [[[1, 4],[3,7.10],[5,6],[7,3],[9,95.9],[121,416]]]);
 });
</script>

       <!-- Page Three -->
    <section id="thirdpage" data-role="page">
        <header data-role="header">
        <h1>Charts</h1>
        </header>
        <div data-role="content">

        <a href="#firstpage" id="firstpage">PageOne</a>
        <a href="#secondpagepage" id="secondpage">Page2</a>


     <div id="chart1" style="height:300px; width:500px;"></div>   

         </div>
            </section>

【讨论】：

【解决方案3】：

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

-first: 将你的 plot container div 放在任何页面之外（例如在 body 标签下方）：

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

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

$("#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>

希望对你有帮助！！！

【讨论】：