图从 MYSQL 到 jquery FLOT

Posted 2023-02-24

【中文标题】图从 MYSQL 到 jquery FLOT

【英文标题】：Graphs from MYSQL to jquery FLOT

【发布时间】：2010-12-08 10:26:12

【问题描述】：

我发现了 jquery 的 flot 来绘制漂亮的图表。但我无法解析我想从 mysql 表示的数据。这让我发疯，因为我收到了这个错误：

uncaught exception: Invalid dimensions for plot, width = 0, height = 0

除此之外还有什么办法可以将MYSQL数据放入flot？：

php部分：

<?php 
include './includes/config.php';
include './includes/opendb.php';

$ID=$_GET["ID"];
$data=$_GET["data"];

$query_set = "SET @cnt = -1";
$query = "SELECT @cnt +1, $data FROM table_inf where ID = $ID;";

$result = mysql_query("$query_set");
if (!$result) 
die("Query to show fields from table failed");


$result = mysql_query("$query_select");
if (!$result) 
die("Query to show fields from table failed");


$arr = array();
while($obj = mysql_fetch_object($result))

    $arr[] = $obj;


//NOW OUTPUT THE DATA:
print json_encode($arr);

mysql_free_result($result);
include './includes/closedb.php';
?>

javascript部分：

<script type="text/javascript">

function get_data() 

var options = 
lines: show: true,
points: show: true,
yaxis:  min: 0 ,
;

$.ajax( url: "return_values.php?ID=1&data=MAG",
dataType: "json",
success: function(result)

plot = $.plot($("#placeholder"), result, options);

);
;
</script>

我一直在谷歌搜索......没有成功。看起来很简单，但情节根本无法理解数据......或其他东西......

php文件的输出如下（以两个条目为例）：

["@cnt := @cnt + 1":"0","MAG":"6.87","@cnt := @cnt + 1":"1","MAG":"11.44"]

其中@cnt 是每行 (0,1,2,3...) x 轴递增的计数器，MAG 是要在 y 轴上显示的数据本身。

我使用的 jquery 是：

<script src="./javascripting/jquery-1.3.2.js" type="text/javascript"></script>   
<script src="./javascripting/jquery.tabs.pack.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="./javascripting/jquery.flot.js"></script>

flot 是 0.5 版和浏览器 firefox。

【问题讨论】：

您可能希望发布一些 PHP 脚本的输出，以便人们可以看到 JSON 编码的数据是什么样的。

是的，你是对的，只是编辑了它。谢谢

您可能想要添加您正在使用的 jQuery 插件。可能是 flot 插件，但不能仅从您的代码中分辨出来。

Flot 插件。刚刚将 javascript 源添加到帖子中。谢谢

【参考方案1】：

让我猜猜：你在一个隐藏的标签中渲染。我还没有找到解决方法，但看起来隐藏 div（例如 display:none）会破坏 flot，因为它无法确定占位符 div 的尺寸。在默认显示的选项卡中进行渲染。

我正在解决同样的问题。我希望我的图表在第二个选项卡上，第一个选项卡包含一些其他数据。这是我的解决方案：

<script type="text/javascript">
   $(function() 
      $("#tabs").tabs();
      $("#tabs").bind('tabsshow', function(event, ui) 
            if (ui.index == 1)    // second tab
               show_graph();
            
      );
  );

然后对 .plot() 的实际调用放在 show_graph() 函数中。

【参考方案2】：

我遇到了同样的问题。感谢 edebill 的解决方案。也许这是新的，但 jquery UI 选项卡文档站点现在提到了这个问题，并且通过更改 CSS 位置有一个非常简单的解决方案： http://docs.jquery.com/UI/Tabs

您只需将面板移出屏幕即可：

.ui-tabs .ui-tabs-hide 
    position: absolute;
    left: -10000px;

【讨论】：

很好，谢谢！如果您不直接编辑 jquery css，您可能希望包括在内，您还应该添加 display: inline !important;否则它不会工作

【参考方案3】：

Just Checking... 您确实包含了占位符 div，对吗？

<div id="placeholder" style="width:600px;height:300px;"></div>

【讨论】：

是的，我使用的 div 是：

【参考方案4】：

您需要多阅读 Flot 文档，Flot 期望的系列数据是特定格式的。至少你应该有

[label: 'Item 1', data: [1,2],label: 'Item 2', data: [2,4]]

这里是api：Flot API，第一项是Data Format，只要把输出改成符合那些标准就可以了。

【参考方案5】：

是的，我一直在处理文档：

"一个系列既可以是原始数据，也可以是具有属性的对象。原始数据 数据格式是点数组：

[ [x1, y1], [x2, y2], ... ] "

在这个例子中：

<script id="source" language="javascript" type="text/javascript">
$(function () 

    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
    d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

    $.plot($("#placeholder"), [ d1, d2, d3 ]);
);
</script>

不需要使用标签：“标签用于图例，如果不指定一个，则该系列将不会出现在图例中。”

无论如何，JSON 编码的数据包含 MYSQL 语句的字段名称，所以它应该像一个标签......

["@cnt := @cnt + 1":"0","MAG":"6.87","@cnt := @cnt + 1":"1","MAG":"11.44"]

【参考方案6】：

将占位符 div 的名称更改为“占位符”以外的名称？