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 ファイルの出力は次のとおりです (たとえば、2 つのエントリの場合)。

[{"@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) にすると、プレースホルダー div のサイズを決定できないため、flot が壊れているようです。デフォルトで表示されるタブでのレンダリングは機能します。

私は同じ問題に取り組んでいます。グラフを 2 番目のタブに表示し、最初のタブに他のデータを保持します。これが私の解決策です：

<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 に答える