Question

我正在使用Jquery Mobile（1.2.0）和Highstock图表测试Phonegap（2.2.0）应用程序。我有一个jquery ready函数的javascript调用我的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中渲染，如果我使用函数beforecreate渲染图表我有更好的结果，但有性能问题。

希望你能提供帮助。问候。

Answer 1

然后你应该使用jQuery来计算div维度。假设您的图表页面有一个id索引：

$('#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/

Highstock图表在Phonegap应用程序中没有显示正确的宽度

1 个答案: