各位有什么好的方法，从数据库调出数据实时显示到php页面上面折线图吗？
我通过定时器定时向后台发送请求，但是它每次刷新都会把以前的数据全部显示出来。或者我如何才能把以前的那部分数据去掉了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据库图形</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//初始化
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: 'test'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
//数据加载完之前先显示一段简单的loading动画
//名字数组（实际用来盛放X轴坐标值）
var names = [];
//value数组（实际用来盛放Y坐标值）
var nums = [];
function getJson() {
console.log(1)
$.ajax({
type: "get",
async: true,
url: "1.php",
data: {},
//返回数据形式为json
dataType: "json",
//请求成功时执行该函数内容，result即为服务器返回的json对象
success: function (result) {
console.log(result)
// alert("连接成功");
if (result) {
for (var i = 0; i < result.length; i++) {
//挨个取出name并填入名字数组，这个xname是根据你在php那发过来的列表来的，下面那个ysh也是
names.push(result[i].xname);
}
for (var i = 0; i < result.length; i++) {
//挨个取出value并填入value数组
nums.push(result[i].ysh);
}
//数据都存进去了，就不需要加载动画了，所以这里把他隐藏
myChart.hideLoading();
//将图表渲染进容器里
myChart.setOption({
xAxis: {
data: names
},
series: [{
name: '销量', data: nums
}]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
console.log(errorMsg)
}
})
}
getJson();
setInterval("getJson()",5000)
</script>
</body>
</html>
