antv从数据库中获取数据
程序员文章站
2022-04-21 21:38:20
...
<?php
session_start();
include_once '../../conn.php';
if ($_SESSION['log_success'] == 1) {
$equipment_id=$_POST["equipment_id"];
$sql="select temperature,humidity,createtime,equipment_id from equipment_data where equipment_id=$equipment_id";
$query=mysql_query($sql);
while($row=mysql_fetch_array($query)){
$array[]=array('temperature' => intval($row['temperature']),'createtime'=>$row['createtime']);
}
$res=json_encode($array);
//var_dump($res);exit;
} else {
echo "<script language='javascript'>alert('对不起，请您先登陆！！');location.href='code.php';</script>";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>折线图</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;}</style>
</head>
<body>
<div class="demo-content" style="margin-top: 10px;margin-left: 30px">
<form method="post" class="form-horizontal" action="chart.php">
<div class="controls">
<label>设备号</label>
<input type="text" class="input-small" name="equipment_id" style="height: 30px" value="<?php if(isset($equipment_id)) echo $equipment_id ?>"/>
<input type="submit" value="查找" name="submit" class="button button-primary">
</div>
</form>
</div>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"></script>
<script>
const data = <?php echo $res?>;
console.log(data);
const chart = new G2.Chart({
container: 'mountNode',
forceFit: true,
height: window.innerHeight
});
chart.axis('temperature',{
type:'linear',
range:[0,100],
label: {
formatter: val => {
return val + '°C';
}
}
});
chart.scale({
temperature: {
alias: '温度' // 为属性定义别名
}
});
chart.tooltip({
crosshairs: {
type: 'line',
nice:true
}
});
const defs = {
'createtime': {
type: 'time',
nice: true,
mask: 'YYYY-MM-DD',
tickInterval: 2 * 24 * 60 * 60 * 1000 // 对于 linear 类型的数据，可以设置 tickInterval 参数来设定每个刻度之间的间距，time 类型的单位为微秒
}
};
chart.source(data,defs);
chart.line().position('createtime*temperature');
chart.point().position('createtime*temperature').size(4).shape('circle').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();
</script>
</body>
</html>