4 votes

Anto avatar

Affichage de HighCharts dans une application JQuery Mobile

Demandé el 27 de Février, 2013
Quand la question a-t-elle été
6513 affichage
Nombre de visites la question a
1 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai le morceau de code suivant de la page principale d'une application JQuery Mobile. Il s'agit essentiellement d'une page principale simple avec un bouton qui redirige vers une autre page ('chart 1') qui contient 2 barres d'onglets dans le pied de page : une pour elle-même ('chart1') et l'autre pour une autre page ('chart2'). Je voudrais ajouter dans la section de contenu de ces deux pages un graphique de la bibliothèque HighCharts lorsque ces pages sont chargées. J'ai essayé plusieurs méthodes (live, bind etc..) mais rien ne semble fonctionner. La seule façon d'afficher les graphiques est d'utiliser la méthode ready (voir ci-dessous). Ma question est la suivante : existe-t-il une méthode qui affiche les graphiques dans la zone spécifique de la page lorsqu'un bouton est cliqué ?

Méthode pour charger les graphiques :

$(document).ready(function() {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'containerYear',
        type: 'column',
        margin: [ 50, 50, 100, 80]
    },...and so on
});

Code de la page principale :

 <div data-role="page" data-theme="b" id="main-page">
    <div data-role="header" data-position="fixed">
        <h1>Data</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">Data</li>
            <li><a href="#chart1" id="btn1" data-transition="slide">Graphs</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>CTK</h4>
    </div>
</div>

 <div data-role="page" data-theme="b" id="chart1">
    <div data-role="header" data-position="fixed">
       <a href="#main-page" data-icon="arrow-l" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
        <h1>Car Crashes</h1>
    </div>
    <div data-role="content">
        <div id="containerYear"></div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#chart1" data-role="tab" class="ui-btn-active">Chart 1</a></li>
                <li><a href="#chart2" data-role="tab" >Chart 2</a></li>
            </ul>
        </div>
    </div>

</div>

<div data-role="page" data-theme="b" id="chart2">
     <div data-role="header" data-position="fixed">
        <a href="#main-page" data-icon="arrow-l" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
        <h1>Car Crashes</h1>
     </div>
     <div data-role="content">
         <div id="containerMonth"></div>
     </div>
     <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#chart1" data-role="tab">Chart 1</a></li>
                <li><a href="#chart2" data-role="tab" class="ui-btn-active">Chart 2</a></li>
            </ul>
        </div>
     </div>
</div>
Demandé el 27 de Février, 2013 par Anto

Réponse

Trop de publicités?

7voto

Gajotres avatar
Gajotres Points 46468

JQuery Mobile est unique lorsqu'il est utilisé avec d'autres cadres de dessin js. Ils ne peuvent être utilisés qu'avec un événement pageshow.

Une dernière chose, n'oubliez pas d'initialiser HighCharts après l'initialisation de jQuery Mobile.

Voici un exemple concret : http://jsfiddle.net/Gajotres/Eg9Xz/

HTML :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>             
</body>
</html>

Javascript :

$(document).on('pageshow', '#index', function(){    
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });

});
Répondu el 27 de Février, 2013 par Gajotres (46468 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X