在 Flask 中使用 Chart.js 创建图表
Chart.js 是一个简单、灵活的 JavaScript 图表库，用于绘制各种类型的图表，Flask 是一个轻量级的 Web 应用框架，使用 Python 编写，本文将介绍如何在 Flask 应用中集成 Chart.js 来创建和展示图表。
环境准备
安装 Flask
首先需要确保已经安装了 Flask，可以使用以下命令进行安装：
pip install flask
安装 Flask-Bootstrap
为了快速构建美观的前端界面，我们可以使用 Flask-Bootstrap，这是一个基于 Bootstrap 的 Flask 扩展。
pip install Flask-Bootstrap
项目结构
假设我们的项目结构如下：
flask_chartjs/ │ ├── app.py ├── static/ │ └── charts.js │ └── css/ │ └── style.css ├── templates/ │ └── index.html └── venv/
创建 Flask 应用
`app.py`
在app.py 文件中创建一个简单的 Flask 应用：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)templates/index.html
在templates 文件夹中创建一个index.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Example</title>
<!-引入 Bootstrap CSS -->
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<!-引入自定义 CSS -->
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Chart.js with Flask</h1>
<canvas id="myChart"></canvas>
</div>
<!-引入 Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-引入自定义 JavaScript -->
<script src="{{ url_for('static', filename='charts.js') }}"></script>
</body>
</html>static/css/style.css
在static/css 文件夹中创建一个style.css 文件，添加一些基本的样式：
body {
padding: 20px;
}`static/charts.js`
在static 文件夹中创建一个charts.js 文件，用于初始化图表：
document.addEventListener("DOMContentLoaded", function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});运行应用
确保你在项目根目录下，运行以下命令启动 Flask 应用：
python app.py
打开浏览器并访问http://127.0.0.1:5000/，你应该能看到一个柱状图。
相关问题与解答
问题一：如何更改图表的类型？
解答： 在charts.js 文件中修改type 属性即可，如果你想改为折线图，可以将type: 'bar' 改为type: 'line'，完整代码如下：
var myChart = new Chart(ctx, {
type: 'line', // 修改为 line
data: { ... },
options: { ... }
});问题二：如何从后端传递动态数据到前端生成图表？
解答： 你可以通过 Flask 模板引擎将数据传递给前端，假设你想根据用户输入生成不同的数据，可以修改app.py 和index.html：
app.py（增加一个路由）
from flask import request, jsonify
import random
@app.route('/data')
def get_data():
labels = ['A', 'B', 'C', 'D', 'E']
data = [random.randint(1, 100) for _ in range(len(labels))]
return jsonify({'labels': labels, 'data': data})index.html（使用 AJAX 请求获取数据）
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
...
<script>
$(document).ready(function() {
$.ajax({
url: '/data',
method: 'GET',
success: function(response) {
var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: response.labels,
datasets: [{
label: 'Dynamic Data',
data: response.data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: { ... }
});
}
});
});
</script>
</body>
</html>各位小伙伴们，我刚刚为大家分享了有关“chart.js flask”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
文章来源网络，作者：运维，如若转载，请注明出处：https://shuyeidc.com/wp/43540.html<
