该博客详细介绍了如何利用HTML、jQuery、Highcharts、PHP和MySQL来实现多曲线动态显示的功能。通过jQuery AJAX调用PHP脚本获取MySQL数据库中的数据，然后以JSON格式返回，更新Highcharts图表和表格，实现数据的实时刷新。涉及到的关键技术包括Highcharts的addPoint方法、MySQL查询以及jQuery的DOM操作。
本文主要实现如下功能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++){
最低0.47元/天 解锁文章
扫一扫
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
