jQPlot图表不工作在jquery移动弹出



我有一个使用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>

弹出窗口显示,但没有图表。我做错了什么?

所有与页面高度和宽度相关的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>

相关内容

  • 没有找到相关文章

最新更新