Javascript 从MYSQL到jquery FLOT的图形

我发现了用于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';
?>

其中@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。

只是检查一下。。。您确实包含了占位符div，对吗

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

---

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

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

---

这是api:，第一项是数据格式，只要更改输出以满足这些标准，您就可以了。

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

“序列可以是原始数据，也可以是具有属性的对象 数据格式是点的数组：

[[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>

---

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

让我猜一下：您正在一个隐藏选项卡中渲染。我还没有找到它的修复程序，但是看起来隐藏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();
            }
      });
  });

$（函数（）{
$（“#制表符”）.tabs（）；
$（“#制表符”）.bind（'tabsshow'，函数（事件，用户界面）{
如果（ui.index==1）{//第二个选项卡
显示_图（）；
}
});
});

---

然后对.plot（）的实际调用被放入show\u graph（）函数中。

我也遇到了同样的问题。谢谢比尔的解决方案。也许这是新的，但是jquery UI tabs文档站点现在提到了这个问题，并通过更改CSS位置提供了一个非常简单的解决方案：

您只需将面板移出屏幕，而不是隐藏：

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

---

你可能想发布一些PHP脚本的输出，这样人们就可以看到JSON编码的数据是什么样子。是的，你是对的，只是编辑了它。谢谢您可能想添加您正在使用的jQuery插件。可能是flot插件，但不能仅从代码中判断。flot插件。刚刚在帖子中添加了javascript源代码。谢谢你我用的div是：很好，谢谢！如果不直接编辑jQueryCSS，您可能还需要添加display:inline！重要的；否则就不行了

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

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

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