2

我正在使用 Jquery Mobile (1.2.0) 和 Highstock 图表测试 Phonegap (2.2.0) 应用程序。我有一个带有 jqueryready函数的 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 呈现图表，我会得到更好的结果，但存在性能问题。

希望你能帮忙。问候。

4

1 回答 1

0

然后你应该使用 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/

于 2012-12-19T21:32:32.703 回答