Question

我正在准备一个jquerymobile应用程序，我想在其中插入一个jqplotchart，以便我为此编写代码。但现在问题是图表没有显示在我的页面中。

图书馆我

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="stylesheets/jquery.mobile-1.1.1.min.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jquery.jqplot.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jqm-docs.css" type="text/css"/>
<script src="jquery.jqplot.min.js" type="text/javascript"></script>
<script src="jqplot.pieRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="hideAddressBar.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jqm-docs.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>

我写的javascript：

$(document).bind("mobileinit",function() {
            // go to server for chart data

            $('#pagePlotChart').live('pageshow',function() {
            $.get("mygraphdata",  function(data){
            $.jqplot('plotChart', data,{ 
                title:'My Chart',
            axesDefaults: 
                { 
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                },
            axes: 
                { xaxis: { label:"Day", pad: 0 }, 
                yaxis: { label: "Measurement" } 
            } 
            });
            }); 
            return false;
            });
            });

html代码：

<div id="pagePlotChart" data-role="page" data-rockncoder-jspage="managePlotChart">
    <header data-role="header" data-position="fixed">
        <h1>Plot Chart</h1>
    </header>
    <section data-role="content">
        <div id="plotChart" class="myChart"></div>
        <button id="refreshPlotChart" value="Refresh Chart" data-mini="true"></button>
    </section>
</div>

实际上我必须从某些php文件中获取json数据并传递给此图表。和图表shuld使用来自某个php文件的json数据显示图形。

我的json数据将在此格式[“v1：myName”，“g：233”，“h：322”]等等。

php文件正在发送json数据。我检查了fidler。但图表不起作用。请告诉我解决方案。

Answer 1

首先，我注意到你在页面标题中加载了两次jQuery mobile。尝试删除旧版本，并将大部分或全部JS包含移动到页脚，这样在浏览器下载JS文件之前，页面可以（部分）呈现。 jqplot组件的最佳实践当然是将包含移到页脚。

加载jqplot组件的实际顺序几乎是正确的。看起来主jQuery文件需要在主jqplot文件之前加载 - 但是现在只有jQuery的移动版本在jqplot之前加载。有关详细信息，请参阅this answer。

如果正在加载jqplot但数据不存在，或者数据或图表代码可能存在错误，则会在页面中看到图表所在的空白区域。确保您可以加载静态图表页面，手工组装您从PHP页面获取的数据。这将测试数据和包含。

如果jqplot根本没有加载（例如，如果没有以正确的顺序加载依赖关系），你将不会在页面上看到图表的任何空白空间，并且它将以零空间呈现，其中图表应该是

看起来您正在正确调用图表div。但是我不确定$(document).bind("mobileinit",function()是否有效。 jqplot的基本调用通常是 $(document).ready(function()。在页面呈现时最初不可见的div中设置图表可能会非常棘手。 This question可能会有所帮助，如果这就是问题所在。

Answer 2

初始化页面后，请参阅this related question有关jQuery Mobile渲染内容的信息。基本上你可以根据naugtur的评论使用.trigger（'create'）。

Answer 3

有一种更简单的方式（在我的情况下有效）：

- 优先：在任何页面之外（例如 body 标记下方）绘制容器div ：

<body>
<div id="plotContainer"></div>
...

- 然后：在 $（文档）.ready（function（）{... 此处 ...}中设置图表（图表））; 并隐藏它，使其不会在页面之间显示：

$("#jqxChart").jqxChart(settings);
$("#jqxChart").hide();

- finaly：只需在页面内复制div：

<script>
$('#page_ID').bind('pageshow', function(data) { 
$("#jqxChart").appendTo("#ID_of_DIV_you_want");
$("#jqxChart").show();  
$('#jqxChart').jqxChart('refresh');
});
</script>

希望这有帮助!!!

jqplot图表没有显示在我的jquerymobile页面中

3 个答案: