3

jqueryモバイルポップアップのクリックで表示する必要があるjQPlotを使用した折れ線グラフがあります。残念ながら表示されません..以下は私のコードです。

    <!DOCTYPE html>

<html>
    <head>

        <title>Line Charts and Options</title>

        <link class="include" rel="stylesheet" type="text/css" href="jquery.mobile-1.3.0.css" />
        <link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
        <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.mobile-1.3.0.js"></script>
        <script type="text/javascript" src="jquery.jqplot.min.js"></script>
        <script type="text/javascript" src="jqplot.canvasTextRenderer.min.js"></script>
        <script type="text/javascript" src="jqplot.canvasAxisLabelRenderer.min.js"></script>

    </head>
    <body>
        <div data-role="page">

            <div data-role="content">
                <img src="downarrow_Green.svg" onclick="openpopup()"/>
                <div id="mychartshow" style="height:150px; width:150px;"></div>

                <div data-role="popup" id="ExchangeRate_graph" data-theme="c" align="left">

                    <div class="ui-grid-d">
                        <div class="ui-block-a" align="left">
                            <span>1y</span>
                        </div>
                        <div class="ui-block-b"  align="left">
                            <span>6m</span>
                        </div>
                        <div class="ui-block-c"  align="left">
                            <span>3m</span>
                        </div>
                        <div class="ui-block-d"  align="left">
                            <span>1m</span>
                        </div>
                        <div class="ui-block-e"  align="left">
                            <span>1w</span>
                        </div>

                    </div>

                    <!--Graph Section-->
                    <div id="mychartshow">

                    </div>

                </div>
            </div>

            <script type="text/javascript">
                $(document).ready(function() {
                    //var plot1 = $.jqplot('chart1', [[93, 17, 19, 11, 15, 13, 18, 12, 15]]);
                    //var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 5, 3, 8, 2, 5]], {title:'US Dollar', axes: {xaxis: {min: 5, max:13, tickInterval:2,numberTicks:5},yaxis: {min: 2, max: 8, numberTicks:4}}});
                    var plot1 = $.jqplot('mychartshow', [[2.89, 3.1, 3.5, 3.4, 2.92]], {
                        title : 'US Dollar',

                        axes : {
                            xaxis : {
                                ticks : [[1, 14], [2, 21], [3, 28], [4, 4], [5, 11]] //using 2d value array
                            },
                            yaxis : {
                                ticks : [2.8, 3.0, 3.2, 3.4, 3.6]

                            }

                        }
                    });

                });

                function openpopup() {
                    $('#ExchangeRate_graph').popup('open');
                }
            </script>

        </div><!--page-->

    </body>

</html>

ポップアップは表示されますが、グラフは表示されません。何が間違っていますか?

4

1 に答える 1

7

ページの高さと幅 (あなたの場合は jqPlot) で動作するすべての jQuery プラグインは、pageshow イベントを介して、またはページが既に表示されている他のポイントで初期化する必要があります。この場合、これは popupbeforeopen イベントです。これは、jQuery Mobile ページがその時点でのみ正しい高さを持つためです。したがって、ページの高さが 0 の場合、プラグインは初期化されますが、高さは 0 に設定されます。

この HTML を空の html ファイルにコピーして、試してみてください。

HTML :

<!DOCTYPE html>
<html>
    <head>

        <title>Line Charts and Options</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link class="include" rel="stylesheet" type="text/css" href="http://www.jqplot.com/src/jquery.jqplot.min.css" />
        <script class="include" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
        <script type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
        <script type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasTextRenderer.min.js"></script>
        <script type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
        <script>
            $(document).on('pageshow', '#graph-page', function(){ 
                $(document).on( "popupafteropen", "#ExchangeRate_graph",function( event, ui ) {
                    var plot1 = $.jqplot('mychartshow', [[2.89, 3.1, 3.5, 3.4, 2.92]], {
                        title : 'US Dollar',

                        axes : {
                            xaxis : {
                                ticks : [[1, 14], [2, 21], [3, 28], [4, 4], [5, 11]] //using 2d value array
                            },
                            yaxis : {
                                ticks : [2.8, 3.0, 3.2, 3.4, 3.6]

                            }

                        }
                    });
                });
            });     
        </script>
    </head>
    <body>
        <div data-role="page" id="graph-page">

            <div data-role="content">
                <a href="#ExchangeRate_graph" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
                <div data-role="popup" id="ExchangeRate_graph" data-theme="c" align="left">

                    <!--Graph Section-->
                    <div id="mychartshow">

                    </div>

                </div>
            </div>

            <script type="text/javascript">
                $(document).ready(function() {
                    //var plot1 = $.jqplot('chart1', [[93, 17, 19, 11, 15, 13, 18, 12, 15]]);
                    //var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 5, 3, 8, 2, 5]], {title:'US Dollar', axes: {xaxis: {min: 5, max:13, tickInterval:2,numberTicks:5},yaxis: {min: 2, max: 8, numberTicks:4}}});
                    var plot1 = $.jqplot('mychartshow', [[2.89, 3.1, 3.5, 3.4, 2.92]], {
                        title : 'US Dollar',

                        axes : {
                            xaxis : {
                                ticks : [[1, 14], [2, 21], [3, 28], [4, 4], [5, 11]] //using 2d value array
                            },
                            yaxis : {
                                ticks : [2.8, 3.0, 3.2, 3.4, 3.6]

                            }

                        }
                    });

                });

                function openpopup() {
                    $('#ExchangeRate_graph').popup('open');
                }
            </script>

        </div><!--page-->

    </body>

</html>
于 2013-05-16T16:49:05.140 に答える