Python代码，后端程序
提前安装flask，`pip install flask`
from flask import Flask, jsonify, render_template
import random
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/data')
def get_data():
# 模拟数据
line_data = {'labels': ['一月', '二月', '三月', '四月', '五月', '六月'],
'datasets': [
{'label': '销售额', 'data': [random.randint(1, 100) for i in range(6)]},
{'label': '访问量', 'data': [random.randint(1, 100) for i in range(6)]}
],
'smooth': True}
barChartData = {
'labels': ['产品A', '产品B', '产品C', '产品D', '产品E', '产品F'],
'datasets': [
{'label': '2023年销量', 'data': [random.randint(1, 100) for i in range(6)]},
{'label': '2022年销量', 'data': [random.randint(1, 100) for i in range(6)]}
],
'barGap': '0%'
}
return jsonify({
'lineChartData': line_data,
'barChartData': barChartData
})
if __name__ == '__main__':
app.run(debug=True)
前端HTML文件
index.html文件需放在templates目录下。
<!DOCTYPE html>
<html>
<head>
<title>Charts with Chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<style>
.chart-container {
width: 1000px;
height: 500px;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<div class="chart-container">
<canvas id="lineChart"></canvas>
<canvas id="barChart"></canvas>
</div>
<script>
var ctxLine = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctxLine, {
type: 'line',
data: {},
options: {
title: {
display: true,
text: 'Line Chart'
},
scales: {
y: {
beginAtZero: true
}
}
}
});
var ctxBar = document.getElementById('barChart').getContext('2d');
var barChart = new Chart(ctxBar, {
type: 'bar',
data: {},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
function fetchData() {
fetch('/data')
.then(response => response.json())
.then(data => {
lineChart.data = data.lineChartData;
lineChart.update();
barChart.data = data.barChartData;
barChart.update();
})
.catch(error => console.error('Error:', error));
}
// 初始加载数据
fetchData();
// 每5秒更新一次数据
setInterval(fetchData, 5000);
</script>
</body>
</html>运行结果图。
运行Python，浏览器打开127.0.0.1:5000，观察运行结果。
