Javascript 使用php显示最后几个图形
我想得到最后3个图形使用刷新页面自动刷新每10秒。在这段代码中，当页面自动刷新时，它会从头开始显示，但我不希望这样。当页面每次刷新时，它必须显示最后3个图形。因为这里只有4个数据可用，所以即使在刷新之后，它也必须仅显示D2到D4图形。当新数据可用时，它将显示D3到D5（目前不可用）图形。如何在自动刷新页面后获取最后三个图形Javascript 使用php显示最后几个图形,javascript,php,jquery,oracle10g,flot,Javascript,Php,Jquery,Oracle10g,Flot,我想得到最后3个图形使用刷新页面自动刷新每10秒。在这段代码中，当页面自动刷新时，它会从头开始显示，但我不希望这样。当页面每次刷新时，它必须显示最后3个图形。因为这里只有4个数据可用，所以即使在刷新之后，它也必须仅显示D2到D4图形。当新数据可用时，它将显示D3到D5（目前不可用）图形。如何在自动刷新页面后获取最后三个图形 <html> <head> <meta http-equiv="Content-Type" content="text/html; charse
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Refresh" Content="10">
<title>Graph</title>
<style>
div.placeholder{
width: 500px;
height:250px
}
</style>
<?php
include("mydb.php");
// run query
$sql1 = "select * from tab where to_char(D,'dd/mm')='25-7'";
$stid1=oci_parse($conn, $sql1);
// set array
$arr1 = array();
if(!$stid1){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r1=oci_execute($stid1);
if(!$r1){
$e=oci_error($stid1);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid1,OCI_ASSOC)){
// add each row returned into an array
$arr1[] = array((strtotime($row['D'])*1000) , (float)$row['D1']);
}
?>
<?php
include("mydb.php");
// run query
$sql2 = "select * from tab where to_char(D,'dd/mm')='26-7'";
$stid2=oci_parse($conn, $sql2);
// set array
$arr2 = array();
if(!$stid1){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r2=oci_execute($stid2);
if(!$r2){
$e=oci_error($stid2);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid2,OCI_ASSOC)){
// add each row returned into an array
$arr2[] = array((strtotime($row['D'])*1000) , (float)$row['D1']);
}
?>
<?php
include("mydb.php");
// run query
$sql3 = "select * from tab where to_char(D,'dd/mm')='27-8'";
$stid3=oci_parse($conn, $sql3);
// set array
$arr3 = array();
if(!$stid3){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r3=oci_execute($stid3);
if(!$r3){
$e=oci_error($stid3);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid3,OCI_ASSOC)){
// add each row returned into an array
$arr3[] = array((strtotime($row['D'])*1000) , (float)$row['D1']);
}
?>
<?php
include("mydb.php");
// run query
$sql4 = "select * from dat where to_char(D,'dd/mm')='28-9'";
$stid4=oci_parse($conn, $sql4);
// set array
$arr4 = array();
if(!$stid4){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r4=oci_execute($stid4);
if(!$r4){
$e=oci_error($stid4);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid4,OCI_ASSOC)){
// add each row returned into an array
$arr4[] = array((strtotime($row['D'])*1000) , (float)$row['D1']);
}
?>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="jquery.flot.time.min.js"></script>
<script type="text/javascript">
var interval=2000;
function getdata(){
var data1=<?php echo json_encode($arr1); ?>;
var data2=<?php echo json_encode($arr2); ?>;
var data3=<?php echo json_encode($arr3); ?>;
var data4=<?php echo json_encode($arr4); ?>;
return [data1,data2,data3,data4];
}
var options={
series: {
lines: {
show: true,
lineWidth: 2,
fill: true
},
points:{
show: "triangle"
}
},
xaxis: {
axisLabel: "Time",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
axisLabel: "Data loading",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
},
legend: {
labelBoxBorderColor: "#B0D5FF"
},
grid: {
hoverable: true,
clickable: true,
backgroundColor: {
colors: ["#B0D5FF", "#5CA8FF"]
}
}
};
$(document).ready(function () {
var dataset=[
{
label: "D1",
data: getdata()[0],
points: {
symbol: "triangle"
}
},
{
label: "D2",
data: getdata()[1],
points: {
symbol: "circle"
}
},
{
label: "D3",
data: getdata()[2],
points: {
symbol: "triangle"
}
},
{
label: "D4",
data: getdata()[3],
points: {
symbol: "triangle"
}
}
];
var counter=0;
for(var i=1,j=0;i<dataset.length,j<$('div.placeholder').length;i++,j++){
$.plot("div.placeholder:eq(" + j + ")", [dataset[j]], options);
counter=i;
}
function update() {
$('div.placeholder:visible:first').hide();
$('div.placeholder:last').after($('<div>').addClass('placeholder'));
$.plot("div.placeholder:last", [dataset[counter++]], options);
if(dataset.length > counter) {
setTimeout(update, interval);
}
}
setTimeout(update, interval);
});
</script>
</head>
<body>
<center>
<h3><b><u>Chart</u></b></h3>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</center>
</body>
</html>
图表
分区占位符{
宽度：500px；
高度：250像素
}
您混合使用服务器端和客户端处理数据，这会导致问题/混乱。尝试从数据库到图表的清晰过程。例如，仅为页面提供三个数据集，并在需要显示新数据时刷新页面。@raidri我无法理解您的观点。你能详细解释一下吗。@Raidri你的意思是“变量数据集=[{label:“D1”，数据：getdata（）[0]，点：{symbol:“triangle”}，{label:“D2”，数据：getdata（）[1]，点：{symbol:“circle”}，{label:“D3”，数据：getdata（）[2]，点：{symbol:“triangle”}]；”然后，当新数据可用时，删除d1并插入d4数据集？如果是这样，那么每次对于每个新的图，我们都会从编码中删除旧的数据集。正确的？那么它不会成为一个硬编码吗？还有别的办法吗？请告诉我该怎么办@RAIDRI您混合使用服务器端和客户端处理数据，这会导致问题/混乱。尝试从数据库到图表的清晰过程。例如，仅为页面提供三个数据集，并在需要显示新数据时刷新页面。@raidri我无法理解您的观点。你能详细解释一下吗。@Raidri你的意思是“变量数据集=[{label:“D1”，数据：getdata（）[0]，点：{symbol:“triangle”}，{label:“D2”，数据：getdata（）[1]，点：{symbol:“circle”}，{label:“D3”，数据：getdata（）[2]，点：{symbol:“triangle”}]；”然后，当新数据可用时，删除d1并插入d4数据集？如果是这样，那么每次对于每个新的图，我们都会从编码中删除旧的数据集。正确的？那么它不会成为一个硬编码吗？还有别的办法吗？请告诉我该怎么办@雷德里