3

我有一个使用 jQPlot 的折线图，需要在单击 jquery 移动弹出窗口时显示。不幸的是它没有出现。下面是我的代码。

    <!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 回答