Интеграция JQuery для мобильных устройств и Highcharts - PullRequest
Новая
       1

Интеграция JQuery для мобильных устройств и Highcharts

2 голосов
/ 30 июня 2011

Кому-нибудь удалось правильно интегрировать старшие чарты с jquerymobile?

Если я запрашиваю страницу, содержащую некоторую диаграмму напрямую (например, http://mysite.com/mobile/page.html)), диаграммы будут инициализироваться и отображаться так, как ожидается. Вместо этого, если я попытаюсь перейти на ту же страницу, используя ссылки привязки, страница будет отображаться, но диаграмм нет. Я использую событие "pageshow" для инициализации диаграмм.

Любая обратная связь будет в значительной степени оценена!

Ответы [ 3 ]

4 голосов
/ 17 января 2012

У меня была такая же проблема, когда я впервые начал кодировать с помощью jQuery Mobile ... Вы должны связать свои скрипты при создании страницы, то есть: 

$(document).delegate("#page-id", "pagecreate", function() {
    // highcharts, etc.
}
1 голос
/ 08 марта 2012

Я попробовал то, что упомянул царь, и у меня это сработало.Я сделал следующее:

Добавил скрипт в тег head и добавил div с идентификатором (rederTo), используемым в скрипте, внутри "page-content". 

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Acura</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script src="libs/hightcharts/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

    <script type="text/javascript">
        var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });
    </script>
</head>

<body>

<div id="ge" data-role="page">
    <div data-role="header">
        //header
    </div>
    <div data-role="content">
        <div id="container"></div>
    </div>
</div>
</body>
</html>
1 голос
/ 30 июня 2011

С помощью jQuery mobile вам нужно поместить скрипты и стили, специфичные для вашей страницы, в раздел page-content. См. «Известные ограничения» в документации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...