Highstock圖表不顯示在Phonegap應用程序中的正確寬度

我使用Jquery Mobile（1.2.0）和Highstock圖表測試Phonegap（2.2.0）應用程序。我有一個JavaScript與jquery ready函數，它調用我的graph()函數。下面，我把這樣一個div：Highstock圖表不顯示在Phonegap應用程序中的正確寬度

<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呈現圖表，我有更好的結果但性能問題。

希望你能幫上忙。此致敬禮。

來源

2012-12-19 ares1986

然後你應該使用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-19 21:32:32 Gajotres

謝謝，這解決了我的問題。 – ares1986

Highstock圖表不顯示在Phonegap應用程序中的正確寬度

回答

相關問題