Диаграмма Highstock не показывает правильную ширину в приложении Phonegap

Я тестирую приложение Phonegap (2.2.0), используя Jquery Mobile (1.2.0) и графики Highstock. У меня есть javascript с функцией jquery ready, которая вызывает мою функцию graph(). Ниже я помещаю div следующим образом:

<div data-role="content" style="text-align:center;">
    <div id="container" style="height:220px; right:10px;"></div>
</div>

Кроме того, код highstock находится в файле function.js:

function graph(){

    $(function() {

      $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
                // Create the chart
                window.chart = new Highcharts.StockChart({
                     chart : {
                     renderTo : 'container' 
                     },
                     rangeSelector : {
                     selected : 1
                     },

                     title : {
                     text : 'AAPL Stock Price'
                     },

                     series : [{
                               name : 'AAPL',
                               data : data,
                               tooltip: {
                               valueDecimals: 2
                               }
                               }]
                     });
                });

      });
}

Когда я запускаю его в Xcode, он не подстраивается под правильную ширину. Когда я устанавливаю ширину и высоту вручную, у меня нет проблем, но, поскольку я разрабатываю кросс-платформы, я хотел бы поместить их в% или как это просто заполнить правый экран. Я пробовал с минимальной шириной и высотой безрезультатно, диаграммы отображаются в index.html, и если я визуализирую диаграмму с помощью функции перед созданием, у меня будут лучшие результаты, но с проблемами производительности.

Надеюсь, вы можете помочь. С уважением.


cordova highcharts jquery-mobile highstock
person ares1986    schedule 19.12.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Затем вы должны использовать jQuery для расчета размеров div. Допустим, ваша страница графика имеет индекс идентификатора:

$('#index').live('pagebeforeshow',function(e,data){    
    screenWidth = $('[data-role="page"]').first().width() - 30;  // -30 to counter content padding
    $('#container').css({'width': screenWidth,'height':screenWidth/2});
});

$(window).resize(function() {
    if($.mobile.activePage.attr('id') === 'index'){
        screenWidth = $('[data-role="page"]').first().width() - 30;  // -30 to counter content padding
        $('#container').css({'width': screenWidth,'height':screenWidth/2});    
    }
});

Этот div будет реагировать на изменение размера страницы. Я также создал для вас пример: http://jsfiddle.net/Gajotres/bXsCV/

person Gajotres    schedule 19.12.2012