2

我正在准备一个 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 数据并传递给这个图表。并且图表应该通过使用来自某个 php 文件的 json 数据来显示图表。

我的 json 数据将采用这种格式 ["v1:myName","g:233","h:322"]..etc。

php 文件正在发送 json 数据。我签入了提琴手。但图表不起作用。请告诉我解决方案。

4

3 回答 3

1

请参阅有关 jQuery Mobile 在页面初始化后呈现内容的相关问题。基本上，您可以根据 naugtur 的评论使用 .trigger('create') 。

于 2013-01-23T00:41:02.083 回答
1

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

加载 jqplot 组件的实际顺序几乎是正确的。不过，看起来主 jQuery 文件需要在主 jqplot 文件之前加载 - 现在只有移动版本的 jQuery 在 jqplot 之前加载。请参阅此答案以获取更多详细信息。

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

如果 jqplot 根本没有加载（例如，如果依赖项没有按正确的顺序加载），您将在页面上根本看不到图表的任何空白空间，并且它将在图表应该存在的地方以零空间呈现。

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

于 2013-01-11T13:38:57.217 回答
1

There is an easier way (worked in my case):

-first: delare your plot container div outside of any page (for example just below body tag):

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

-then: set the plot (Chart) in your $(document).ready(function(){ ... here ... }); and hide it so it will not show between pages:

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

-finaly: just copy the div with the plot inside your page:

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

Hope this helps!!!

于 2014-09-10T07:56:10.310 回答