さまざまな監視システムで長い間働いていたので、あらゆる種類のグラフを作成することが本当に好きでした。 しばらくの間、rrdtoolは私を助けてくれましたが、私は常により多くの双方向性を手に入れたいと思っていました。 しかし、ひとたびチャートに出くわすと、私は通り過ぎることができませんでした。 私が長い間夢見ていたこと-ページの更新に遅れのないグラフのズーム、ツールチップ-すべてがそこにありました。
javascriptのレベルが0、PHPの0.5程度であるとすぐに警告します。したがって、私の詳細な話のターゲットグループは、私のように、既製のソリューションflot + mysqlを探してインターネットをさまよいました。私自身は、ネットワークの広大さにこれを発見していません。
だから。 Googlecodeでフリート自体をダウンロードすることから始めましょう。 これをWebサーバーのディレクトリ（またはリンク）にドロップし、index.htmlから（十字線プラグインを使用して）十字線付きの追跡曲線を選択します。絶対に任意を選択できますが、この例では使用します。
彼女のすでに修正されたコード：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.crosshair.js"></script>
</head>
<body>
<h1>Flot crosshairs Example</h1>
<div id="placeholder" style="width:620px;height:225px"></div> //
<p>Love plots.</p>
<p id="hoverdata"></p>
<script id="source" language="javascript" type="text/javascript">
var plot;
$(function () {
get_data();
});
function get_data() {
$.ajax({ url: "getdata.php", // php , mysql
dataType: "json",
success: function(sin)
{
for (var i = 0; i < sin.length; ++i)
sin[i][0] = sin[i][0]*1000 + 3 * 1000 * 60 * 60; // , mysql unix_timestamp(time) flot + UTC+3
function weekendAreas(axes) {
var markings = [];
var d1 = new Date(axes.xaxis.min);
// go to the first Saturday
d1.setUTCDate(datasets.getUTCDate() - ((d1.getUTCDay() + 1) % 7))
d1.setUTCSeconds(0);
d1.setUTCMinutes(0);
d1.setUTCHours(0);
var i = d1.getTime();
do {
// when we don't set yaxis, the rectangle automatically
// extends to infinity upwards and downwards
markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
i += 7 * 24 * 60 * 60 * 1000;
} while (i < axes.xaxis.max);
return markings;
}
plot = $.plot($("#placeholder"),
[ { data: sin, label: "hz = 00000"} ], {
series: {
lines: { show: true }
},
crosshair: { mode: "x" },
grid: { hoverable: true, autoHighlight: false },
yaxis: { min: 0 },
xaxis: { mode: "time" }
});
var i = 0;
(function () {
i = i + 1;
$.ajax({ url: "getlastdata.php", // php , mysql
dataType: "json",
success: function(ans)
{
ans[0][0] = ans[0][0]*1000 + 3 * 1000 * 60 * 60; // -
sin.push([ans[0][0],ans[0][1]]);
plot = $.plot($("#placeholder"),
[ { data: sin, label: "hz=0" } ], {
series: {
lines: { show: true }
},
crosshair: { mode: "x" },
grid: { hoverable: true, autoHighlight: false },
yaxis: { min: 0 },
xaxis: { mode: "time" }
});
var legends = $("#placeholder .legendLabel");
legends.each(function () {
$(this).css('width', $(this).width() + 30);
});
var updateLegendTimeout = null;
var latestPosition = null;
function updateLegend() {
updateLegendTimeout = null;
var pos = latestPosition;
var axes = plot.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max)
return;
var i, j, dataset = plot.getData();
for (i = 0; i < dataset.length; ++i) {
var series = dataset[i];
// find the nearest points, x-wise
for (j = 0; j < series.data.length; ++j)
if (series.data[j][0] > pos.x)
break;
legends.eq(i).text(series.label.replace(/=.*/, "= " + series.data[j][1])); // , , .
}
}
$("#placeholder").bind("plothover", function (event, pos, item) {
latestPosition = pos;
if (!updateLegendTimeout)
updateLegendTimeout = setTimeout(updateLegend, 50);
});
}
});
setTimeout(arguments.callee, 60000) //
})();
}
});
}
</script>
</body>
</html>
///////////////////////////////////////////////// getdata.php
<?
$hostname = "localhost";
$username = "user";
$password = "pass";
$dbName = "mon";
$time="2010-01-22 23:40:00";
/* MySQL, */
$table = "hztest";
/* */
mysql_connect($hostname,$username,$password) OR DIE(" ");
/* . - */
mysql_select_db($dbName) or die(mysql_error());
$dataset1 = array();
/* */
$query = "SELECT UNIX_TIMESTAMP(time),hztest FROM $table WHERE time > '$time'";
/* . - . */
$res = mysql_query($query) or die(mysql_error());
while ($row=mysql_fetch_array($res)) {
$dataset1[] = array( $row['UNIX_TIMESTAMP(time)'], $row['hztest'] );
}
echo json_encode($dataset1);
/* */
mysql_close();
?>
したがって、getlastdata.phpのみが異なります
行$クエリ
$ query = "SELECT UNIX_TIMESTAMP（time）、hztest FROM $ table ORDER BY time DESC LIMIT 0.1";
主な利点は、ここで多くのことを最適化できる可能性が高いという事実にもかかわらず、この構造全体が機能することです。 ただし、phpとjavascriptの相互作用の詳細を理解せずに、flot機能を試したい人のために、これをすべて書きました。 一言で言えば、指定された時間にmysqlからデータが最初にロードされ、1分ごとに1つの値がロードされ、ページ全体を更新せずにそれを考慮してグラフが再構築されます。 タイムアウトは、SELECT NOW（）-n時間間隔と書かれた時間を使用して厳密に設定することはできませんが、チャート上で常に同じ期間を設定するには、サイクルごとにsin.shift（）を使用し、配列の最初の値を削除します。
PS phpからjavascriptへのデータ転送を正しく行うには、php jsonが必要になります（fedoraでテストしましたが、動作させるためには同じ名前の追加パッケージをインストールする必要がありました）
PSはDmitryGushinを招待してくれてありがとう