php - 在 php 页面中创建 jqplot 图

标签 php javascript ajax jqplot

我试图通过使用 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。实现这一目标的步骤:

  1. 首先,使用 PHP 从 MySQL 数据库中检索您需要的数据。
  2. 然后,在 javascript 中使用 PHP 输出您检索到的绘图数据 代码块作为 PHP 发送给客户端的 HTML 的一部分。
  3. 在页面加载时使用 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/

相关文章:

php - TCPDF 单行左中右对齐

php - 管理员找不到 PHP 扩展

javascript - 遍历对象数组并返回随机对象值 - JavaScript

javascript - 有没有办法从我网站的每个浏览器中删除滚动条?

javascript - 带有间隔的 jQuery AJAX

CodeIgniter "Unable to load the requested class: iofactory"中的 PHPExcel 错误

php - 我想通过一个查询以逗号分隔格式获取表的所有自动增量 id,这可能吗?

javascript - div 不与其他人一起移动

javascript - Google Feed 解析器缺少属性(节点)

javascript - Ajax 提交 ajax 加载的表单