jQPlot图表在jQuery Mobile弹出窗口中无法工作

Question

jQPlot图表在jQuery Mobile弹出窗口中无法工作

jqueryjquery-mobilejqplotjquery-mobile-pageshow

3

我有一个使用 jQPlot 的折线图需要在点击 jQuery 移动 pop-up 后显示。不幸的是，它没有显示出来.. 下面是我的代码。

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

弹窗出现了，但是没有图表。我做错了什么吗？

- Silver

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gajotres · Accepted Answer

所有与页面高度和宽度相关的jQuery插件（例如jqPlot）都必须在页面已经显示的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>