如何使用Python向基于Chart.js的动态图表网站提交数据
2026-4-30
如何用Python提交数据到服务器并动态更新Chart.js图表
嘿，我来帮你一步步搞定这个问题！既然你是JS和HTML新手，咱们从最基础的部分入手——先搭个简单的Python服务器接收数据，再实现数据提交，最后让Chart.js图表动态更新～
第一步：搭建Python服务器（用Flask）
首先得有个服务器来接收你提交的数据，Flask是个轻量又容易上手的框架，非常适合新手。
- 先安装Flask：
pip install flask
- 创建一个名为
app.py的文件，写入以下服务器代码：
from flask import Flask, request, jsonify, render_template app = Flask(__name__) # 临时存储图表数据，实际项目可以换成数据库 chart_data = [860,1140,1060,1060,1070,1110,1330,2210,7830,2478] # 提供前端页面的路由 @app.route('/') def index(): return render_template('index.html') # 接收POST请求，更新图表数据 @app.route('/submit-data', methods=['POST']) def submit_data(): global chart_data received_data = request.get_json() if 'data' in received_data: chart_data = received_data['data'] return jsonify({"status": "success", "message": "数据已更新"}) return jsonify({"status": "error", "message": "缺少必填的data字段"}) # 供前端获取最新图表数据的路由 @app.route('/get-data', methods=['GET']) def get_data(): return jsonify({"data": chart_data}) if __name__ == '__main__': app.run(debug=True)
第二步：修改前端HTML文件
在Flask项目目录下新建一个templates文件夹（必须叫这个名字，Flask会自动识别），把你的HTML文件放进去，然后修改代码来支持动态更新：
<html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <body> <canvas id="myChart" style="width:100%;max-width:600px"></canvas> <!-- 添加一个按钮触发数据提交 --> <button onclick="submitNewData()">提交指定数据</button> <script> var xValues = [100,200,300,400,500,600,700,800,900,1000]; // 保存Chart实例，方便后续更新数据 var myChart; // 初始化图表的函数 function initChart(initialData) { myChart = new Chart("myChart", { type: "line", data: { labels: xValues, datasets: [{ data: initialData, backgroundColor: "rgba(0,0,255,1.0)", borderColor: "rgba(0,0,255,0.1)", fill: false, tension:0.1 }] }, options: { legend: {display: false} } }); } // 页面加载时从服务器获取初始数据并初始化图表 fetch('/get-data') .then(response => response.json()) .then(data => initChart(data.data)); // 提交数据到服务器并更新图表的函数 function submitNewData() { // 这里就是你要提交的指定数据 const targetData = [860,1140,1060,1060,1070,1110,1330,2210,7830,2478]; // 用fetch发送POST请求到服务器 fetch('/submit-data', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({data: targetData}), }) .then(response => response.json()) .then(result => { console.log('提交结果:', result); // 更新图表数据并刷新 myChart.data.datasets[0].data = targetData; myChart.update(); }) .catch(error => console.error('提交出错:', error)); } </script> </body> </html>
第三步：用Python脚本提交数据（可选）
如果你不想通过前端按钮提交，而是想用Python脚本直接把本地数据发送到服务器，可以写一个简单的脚本submit_script.py：
import requests # 服务器的提交接口地址 api_url = 'http://localhost:5000/submit-data' # 要提交的目标数据 submit_data = { "data": [860,1140,1060,1060,1070,1110,1330,2210,7830,2478] } # 发送POST请求 response = requests.post(api_url, json=submit_data) # 打印服务器返回的结果 print(response.json())
运行流程
- 启动Flask服务器：在终端运行
python app.py - 打开浏览器访问
http://localhost:5000，你会看到初始加载的图表 - 点击页面上的“提交指定数据”按钮，图表会立刻更新；或者运行
python submit_script.py，然后页面会自动获取最新数据（如果想自动刷新，可以在前端加定时请求，不过上面的代码里点击按钮会直接更新）
这样就完成了从Python提交数据到服务器，并且动态更新Chart.js图表的整个流程啦～
内容的提问来源于stack exchange，提问作者멍토멍토
