代码如下：
前端html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--<script type="text/javascript" src="jquery.js"></script>-->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
<script>
var app = {
xvalue: [],
yvalue: [],
z:[],
};
// 发送ajax请求，从后台获取json数据
$(document).ready(function () {
getData();
console.log(app.value1);
console.log(app.timepoint)
console.log(app.predictvalue1)
});
function getData() {
$.ajax({
url: '/test',
data: {},
type: 'POST',
async: false,
dataType: 'json',
success: function (data) {
app.value1 = data.value1;
app.predictvalue1=data.predictvalue1;
value1 = app.value1;
predictvalue1=app.predictvalue1;
function trueData(i) {
now = new Date(+now + oneDay);
value = value1[i];
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
}
}
function predictData(i) {
now1 = new Date(+now1 + oneDay);
predictvalue = predictvalue1[i];
return {
name: now1.toString(),
value: [
[now1.getFullYear(), now1.getMonth() + 1, now1.getDate()].join('/'),
Math.round(predictvalue)
]
}
}
var data = [];
var predictdata=[];
var now = +new Date(1997, 9, 3);
var now1 = +new Date(1997, 9, 4);
var oneDay = 24 * 3600 * 1000;
for (var i = 0; i < value1.length; i++) {
data.push(trueData(i));
}
for (var i = 0; i < predictvalue1.length; i++) {
predictdata.push(predictData(i));
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '动态数据 + 时间坐标轴'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '真实数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: [],
markLine: {
itemStyle: {
normal: {
borderWidth: 1,
lineStyle: {
type: "dash",
color: 'red',
width: 2
},
show: true,
color: '#4c5336'
}
},
data: [{
yAxis: 900
}]
}
},
{
name: '预测数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: [],
markLine: {
itemStyle: {
normal: {
borderWidth: 1,
lineStyle: {
type: "dash",
color: 'blue',
width: 2
},
show: true,
color: '#4c5336'
}
},
data: [{
yAxis: 900
}]
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
setInterval(function () {
for (var i = 0; i < 1; i++) {
data.shift();
data.push(trueData(i));
}
for (var i = 0; i < 1; i++) {
predictdata.shift();
predictdata.push(predictData(i));
}
myChart.setOption({
series: [{
data: data
},
{
data: predictdata
}]
});
}, 1000);
}
})
}
</script>
</body>
</html>
后端py，用的是flask框架：
import MySQLdb
from flask import Flask, render_template, url_for
import pymysql
import pandas as pd
import numpy as np
from pandas import read_csv
import matplotlib.pyplot as plt
from sklearn.preprocessing import MinMaxScaler
from sklearn.metrics import mean_squared_error
from keras.models import Sequential
from keras.layers import LSTM, Dense, Activation,Dropout
import json
import operator
from functools import reduce
import math
import tensorflow as tf
from keras import initializers
import time
# 生成Flask实例
app = Flask(__name__)
@app.route("/")
def hello():
return render_template('new_file.html')
# /test路由 接收前端的Ajax请求
@app.route('/test', methods=['POST'])
def my_echart():
# 连接数据库
conn = MySQLdb.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test', charset='utf8')
cur = conn.cursor()
sql = 'SELECT timepoint,value1 from timeseries'
cur.execute(sql)
u = cur.fetchall()
timepoint = []
value1 = []
for data in u:
value1.append(data[1])
timepoint.append(data[0])
print(value1)
# 转换成json格式
jsonData = {}
jsonData['value1'] = value1
jsonData['timepoint']=timepoint
# json.dumps()用于将dict类型的数据转换成str,因为如果直接将dict类型的数据写入json会报错，因此将数据写入时需要用到此函数
j = json.dumps(jsonData)
cur.close()
conn.close()
# 在浏览器上渲染my_template.html模板（为了查看输出数据)
return (j)
if __name__ == '__main__':
app.run(debug=True,port='5000')
返回的数据是从mysql中读取的，现在我想用ajax的方法定时请求数据库的下一个数据到达前台，并且刷新页面显示出来，应该怎么修改代码？
数据库如下：
