7

我发现了 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。

4

6 回答 6

9

让我猜猜：你在一个隐藏的标签中渲染。我还没有找到解决方法，但看起来隐藏 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() 函数中。

于 2010-08-07T15:34:12.787 回答
3

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

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

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}
于 2010-12-13T21:44:08.643 回答
1

只是检查...您确实包含了占位符 div，对吗？

<div id="placeholder" style="width:600px;height:300px;"></div>
于 2009-10-20T19:47:56.153 回答
0

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

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

这是api：Flot API，第一项是Data Format，只需更改输出以符合这些标准就可以了。

于 2009-10-20T20:30:26.317 回答
-1

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

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

[ [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"}]
于 2009-10-21T06:38:44.200 回答
-3

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

于 2010-03-05T05:57:29.693 回答