我试图通过使用 apache 服务器做一个小项目来学习 php。我有一个 php 页面,我想在其中使用从 MySql 查询中提取的数据显示带有 jqplot 的条形图。我已经有一个查询可以为我提供我想要的数据。问题是我不知道如何将其实现到 jqplot 图中。我猜我需要进行 ajax 调用,但如果我能避免的话,我愿意这样做。到目前为止,我的 PHP 页面代码在这里 http://snipt.org/oknnl2 .
条形图的 javascript 在这里 http://snipt.org/oknoi3 .
我希望图表在第 177 行的 div id=chartdiv 中呈现。我必须可视化 6 个图表。如果我能在这件事上得到一些帮助,我相信我能用同样的过程来构建其他的。
最佳答案
PHP 无法创建 javascript 图并将其发送到下游客户端,但您也不必在页面加载后进行实际的 AJAX 调用。页面加载后的简单 javascript 就足够了。如果您在 PHP 级别检索所需的数据,则可以在客户端收到的 HTML 中将其提供给 javascript。实现这一目标的步骤:
- 首先,使用 PHP 从 MySQL 数据库中检索您需要的数据。
- 然后,在 javascript 中使用 PHP 输出您检索到的绘图数据 代码块作为 PHP 发送给客户端的 HTML 的一部分。
- 在页面加载时使用 PHP 植入的数据执行 javascript。
所以,一个简化的例子:
<?php
// Retrieve plot data from mysql
$q = '...';
$r = mysql_query($q);
$plot_row1 = array();
$plot_row2 = array();
$plot_row3 = array();
while ($row = mysql_fetch_array($r)) {
// append values to $plot_row1, $plot_row2 and $plot_row3 arrays
}
$my_page_title = 'My first PHP/JS Combo Foray';
?>
<html>
<head>
<script type="text/javascript" src="/scripts/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/scripts/my_plotter.js"></script>
</head>
<body>
<h1><?php echo $my_page_title; ?></h1>
<div id="chartdiv">
Hold on, javascript is loading the plot ...
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
// we're combining the php array elements into a comma separated list
// so that when the code is output javascript thinks it's an array.
// if the $plot_row1 = array(1, 2, 3) then we'd get this:
//
// row1 = [1, 2, 3];
//
// if you needed quotes around the imploded php array values (if they
// are strings where javascript is concerned) you could do this instead:
//
// row1 = ["<?php echo substr(implode('","', $plot_row1), 0, -2); ?>"];
row1 = [ <?php echo rtrim(implode(',', $plot_row1), ','); ?> ];
row2 = [ <?php echo rtrim(implode(',', $plot_row2), ','); ?> ];
row3 = [ <?php echo rtrim(implode(',', $plot_row3), ','); ?> ];
// call your js function that creates the plot
showBrittleness(row1,row2,row3);
// add whatever js code you need to append the plot to $('#chartdiv')
}
</script>
更新
根据对 jqplot docs 的粗略检查,如果你编辑你从这个链接的 javascript 的第 12 行:
var plot1 = $.jqplot('chart1', [s1, s2], {
对此:
var plot1 = $.jqplot('chartdiv', [s1, s2], {
您的函数应在“chartdiv”id 元素中呈现绘图。 $.jqplot 函数的第一个参数似乎是创建它的元素......
关于php - 在 php 页面中创建 jqplot 图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8424878/