2

Jquery Mobile (1.2.0) と Highstock チャートを使用して Phonegap (2.2.0) アプリケーションをテストしています。ready私の関数を呼び出すjquery関数を備えた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 に答える