конфликт jqplot с jquerymobile - PullRequest
Новая
       14

конфликт jqplot с jquerymobile

0 голосов
/ 06 декабря 2011

на той же 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>

Любой совет для преодоления конфликта?может я что то пропустил?

Заранее спасибо, М.

Ответы [ 3 ]

2 голосов
/ 06 декабря 2011

Это распространенная проблема, обходной путь, это глючит ...

Не используйте документ, готовый с jquerymobile, используйте pageInit ()

В форуме jquery нашел эту тему, егоработает со статическими данными, но я никогда не заставляю его работать jqplot с вызовом json на jquerymobile.

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

Удачи!

1 голос
/ 10 сентября 2014

Есть более простой способ (работал в моем случае):

- first: delare вашего контейнера с сюжетом div вне любой страницы (например, чуть ниже тега body ): 

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

- затем: установить график (диаграмму) в вашем $ (документ) .ready (function () {... здесь ...}); и скрыть его, чтобы он не отображался между страницами: 

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

Надеюсь, это поможет !!!

1 голос
/ 02 июля 2012

Я люблю 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>
...