2020-02-16php+jQuery ajax+mysql+highcharts+jquery table实现多曲线动态显示
本文主要实现如下功能keyword：
-HTML加载jquery和highcharts
-highcharts增加addpoint多个曲线
-Mysql修改数据库
-JqueryAjax调用PHP
-php后台读取返回json格式
-jquery局部更新table
- Js全局变量传递json数据
-highchart实时动态同步显示成功
源代码：Html部分-Js部分
代码位置：
E:\80iteaQAC----ddddddddddd\Linux\SourcesCode\2020-01-17jqueryAjax\ex03php+jQuery ajax实现的实时刷新显示数据功能示例
<html>
<head>
<meta charset='utf-8'>
<title>hello</title>
</head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="jquery-3.3.1.js"></script>
<script src="Highcharts-6.2.0/code/highcharts.js"></script>
<script src="Highcharts-6.2.0/code/modules/exporting.js"></script>
<script src="Highcharts-6.2.0/code/modules/export-data.js"></script>
<script>
function generateInitDataMph1() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = (-1*60+1); i <= 0; i += 1) {
data.push({
x: time + i * 1000,//1000 means miliseconds???
y: 0.5//Math.random()//initial data
});
}
return data;
}
function generateInitDataMph2() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = (-1*60+1); i <= 0; i += 1) {
data.push({
x: time + i * 1000,//1000 means miliseconds???
y: 0.8//Math.random()//initial data
});
}
return data;
}
var vjsonResult;
function check(){
$.ajax({
type:"GET",
url:"./demo.php",
dataType:"json",
success:function(data){
if(data.success){
//vjsonResult = $.parseJSON(data);
vjsonResult = data;
console.log(vjsonResult);
var count = data.info.length;
for(i=0;i<count;i++){
//$('#table_mph01 td').eq((i+1)*2+1).html(data.info[i].name);
//$('#table_mph01 td').eq((i+1)*4+0).html(data.info[i].id);
$('#table_mph01 td').eq((i+1)*4+1).html(data.info[i].name);
$('#table_mph01 td').eq((i+1)*4+2).html(data.info[i].age);
$('#table_mph01 td').eq((i+1)*4+3).html(data.info[i].address);
//var dom = "<tr align='center' id='"+data.info[i].id+"'><td>"+data.info[i].id+"</td><td>"+data.info[i].name+"</td></tr>";
var dom = "<tr align='center' id='"+data.info[i].id+"'>\
<td>"+data.info[i].id+"</td>\
<td>"+data.info[i].name+"</td> \
<td>"+data.info[i].age+"</td> \
<td>"+data.info[i].address+"</td> \
</tr>";
var tag = '#'+data.info[i].id;
if(!$(tag).length){
$("#info").append(dom);
}
}
}else{
alert('error');
}
},
error:function(res){
alert(res.status);
}
});
}
window.setInterval(check, 1000); //每秒执行一次
var arrayData1 = [];
arrayData1 = generateInitDataMph1();
var arrayData2 = [];
arrayData2 = generateInitDataMph2();
$(document).ready(function() {//Highcharts.chart('container', {
var chart= {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var mphseries0 = this.series[0];
var mphseries1 = this.series[1];
var mphseries2 = this.series[2];
var mphseries3 = this.series[3];
var mphseries4 = this.series[4];
var mphseries5 = this.series[5];
var mphseries6 = this.series[6];
var mphseries7 = this.series[7];
var mphseries8 = this.series[8];
var mphseries9 = this.series[9];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
/*
mphseries0.addPoint([x, y], true, true);
mphseries1.addPoint([x, y+0.1], true, true);
mphseries2.addPoint([x, y+0.2], true, true);
mphseries3.addPoint([x, y+0.3], true, true);
mphseries4.addPoint([x, y+0.4], true, true);
mphseries5.addPoint([x, y+0.5], true, true);
mphseries6.addPoint([x, y+0.6], true, true);
mphseries7.addPoint([x, y+0.7], true, true);
mphseries8.addPoint([x, y+0.8], true, true);
mphseries9.addPoint([x, y+0.9], true, true);
*/
var intTemp = parseInt(vjsonResult.info[0].age,10);
intTemp = parseInt(vjsonResult.info[1].age,10);
intTemp = parseInt(vjsonResult.info[2].age,10);
intTemp = parseInt(vjsonResult.info[3].age,10);
intTemp = parseInt(vjsonResult.info[4].age,10);
intTemp = parseInt(vjsonResult.info[5].age,10);
mphseries0.addPoint([x, parseInt(vjsonResult.info[0].age,10)], true, true);
mphseries1.addPoint([x, parseInt(vjsonResult.info[1].age,10)], true, true);
mphseries2.addPoint([x, parseInt(vjsonResult.info[2].age,10)], true, true);
mphseries3.addPoint([x, parseInt(vjsonResult.info[3].age,10)], true, true);
mphseries4.addPoint([x, parseInt(vjsonResult.info[4].age,10)], true, true);
mphseries5.addPoint([x, parseInt(vjsonResult.info[5].age,10)], true, true);
mphseries6.addPoint([x, (y+0.6)*10], true, true);
mphseries7.addPoint([x, (y+0.7)*10], true, true);
mphseries8.addPoint([x, (y+0.8)*10], true, true);
mphseries9.addPoint([x, (y+0.9)*10], true, true);
//zero.push(val.temperature);
//arrayData.push({x,y});
}, 1000);
}
}
};
var credits={
enabled:false // 禁用版权信息
};
var time= {
useUTC: false
};
var title= {
text: 'Live random data'
};
var xAxis= {
type: 'datetime',
tickPixelInterval: 150
};
var yAxis= {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var plotOptions= {
series: {animation:false}
};
var tooltip= {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
};
var legend= {
enabled: false
};
var exporting= {
enabled: false
};
var series= [{
name: 'Random data1',
data: (arrayData1)
},
{
name: 'Random data2',
data: (arrayData2)
},
{
name: 'Random data3',
data: (arrayData2)
},
{
name: 'Random data4',
data: (arrayData2)
},
{
name: 'Random data5',
data: (arrayData2)
},
{
name: 'Random data6',
data: (arrayData2)
},
{
name: 'Random data7',
data: (arrayData2)
},
{
name: 'Random data8',
data: (arrayData2)
},
{
name: 'Random data9',
data: (arrayData2)
},
{
name: 'Random data10',
data: (arrayData2)
}
];
var json = {};
json.credits = credits;
json.time = time;
json.tooltip = tooltip;
json.legend = legend;
json.exporting = exporting;
json.chart = chart;
json.title = title;
//json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.plotOptions = plotOptions;
json.series = series;
$('#container').highcharts(json);
});
</script>
<body>
<div style='width:600px;margin:0 auto;'>
<table id='table_mph01' border='1' width="600px">
<thead>
<tr><th>id</th><th>name</th><th>age</th><th>address</th></tr>
</thead>
<tbody id='info'>
<tr align='center' id='111'>
<td>111</td>
<td>姓名测试</td>
<td>年龄测试</td>
<td>地址测试</td>
</tr>
</tbody>
</table>
</div>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Php操作mysql代码：
<?php
$mysqli = new mysqli("localhost","root","123","db_ajax_table_test");
$mysqli->set_charset('utf8');
$query = 'SELECT * FROM tb_famous_people';
$result = $mysqli->query($query);
$arr = $result->fetch_all(MYSQLI_ASSOC);
$info = json_encode($arr);
echo $json = '{"success":true,"info":'.$info.'}';
Mph的效果：
Mysql并行相关操作：
--
-- 表的结构 `tb_famous_people`
--
create database db_ajax_table_test;
show databases;
use db_ajax_table_test;
show tables;
CREATE TABLE IF NOT EXISTS `tb_famous_people` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(20) COLLATE utf8_bin NOT NULL,
`age` varchar(20) COLLATE utf8_bin NOT NULL,
`address` varchar(20) COLLATE utf8_bin NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=5 ;
--
-- 转存表中的数据 `tb_famous_people`
--
INSERT INTO `tb_famous_people` (`id`, `name`, `age`, `address`) VALUES (1, '雷军', '11', '北京');
INSERT INTO `tb_famous_people` (`id`, `name`, `age`, `address`) VALUES (2, '马化腾', '22', '上海');
INSERT INTO `tb_famous_people` (`id`, `name`, `age`, `address`) VALUES (3, '李彦宏', '33', '广州');
INSERT INTO `tb_famous_people` (`id`, `name`, `age`, `address`) VALUES (4, '马云', '44', '深圳');
INSERT INTO `tb_famous_people` (`id`, `name`, `age`, `address`) VALUES (5, '马云', '55', '郑州');
update tb_famous_people set name='朱朱朱1', age='123', address='东莞' where id='3';
update tb_famous_people set name='朱朱朱2', age='456', address='深圳' where id='3';
update tb_famous_people set name='朱朱朱3', age='789', address='惠州' where id='3';
select *from db_ajax_table_test.tb_famous_people;
drop database db_ajax_table_test;
show databases;
平台布局：
Apache部署：
END