通过Flask-RestX的Flask Charts.JS(带样本)

方石剑
456 阅读2分钟

编码员们好!

本文介绍了如何使用Flask和Charts.js编码三种不同的图表（条形图、线形图和饼图）。本页提到的所有概念都完全实现在一个免费的样本中，保存在Github上（MIT许可）。对于新手来说，Flask是一个由Python驱动的领先的后台框架，而Charts.JS是一个用于数据分析的流行JS库。

Thanks for reading!

很多时候，我们需要以图形和图表的形式向用户展示数据，而不是简单的普通表格。可视化是总结和交流数据的非常有效的工具。

我们的项目将遵循一个简单的结构，对于前端，我们将使用Bootstrap 5 进行样式设计，使用ChartJS 绘制图表。后台将使用Flask ，Flask-RestX ，将用于实现一个简单的REST API ，图表的数据将存储在SQLite 数据库中，Flask-SQLAlchemy 将用于与数据库交互。

✨ Flask简介

Flask是最受欢迎的网络框架之一，受到初学者和专家的喜爱。它是一个微框架，以其简单性而闻名。Flask只提供web框架的基本核心功能，如模板引擎、路由和模板引擎等。为了提供额外的功能，Flask使得实现扩展非常容易。

我们的例子将使用两个流行的扩展Flask-RestX ，用于实现REST API服务，以及SQLAlchemy ，用于存储和检索图表的数据。

开始使用Flask是非常容易的。让我们来看看下面这个由Flask官方文档提供的样本。

👉 通过PIP安装Flask

$ pip install Flask

👉 Flask - 一个最小的应用程序

from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
    return "<h1>Hello World from Flask!</h1>"

👉 启动应用程序

$ flask run
Running on http://127.0.0.1:5000/

此时，通过在浏览器中访问该应用，我们应该看到由我们的代码提供的臭名昭著的消息Hello World 。

✨ Flask RestX

Flask-RestX 是Flask的一个扩展，增加了对快速构建REST API的支持。换句话说，这个库可以帮助我们使用API服务来管理数据库信息，暴露所有需要的操作**（创建**、读取、更新和删除）。让我们来编写一个最小的 项目。Flask-RestX

👉 安装Flask-RestX

$ pip install flask-restx

👉 Flask-RestX - 一个最小的样本

from flask import Flask
from flask_restx import Resource, Api

app = Flask(__name__)
api = Api(app)

@api.route('/api)
class DemoAPI(Resource):
    def get(self):
        return {"message": "This is a message from RESTX"}

if __name__ == '__main__':
    app.run(debug=True)

一旦我们在浏览器中访问URLhttp://localhost/api ，我们应该看到一个由上述代码提供的简单JSON。

✨ 用Chart.js绘图

使用Chart.js库在Flask应用程序中加入图表支持是非常容易的（不仅如此）。Chart.js对初学者非常友好，因为你可以直接在你的前端模板中包含它，不需要前端工具，如Webpack,npm, 或yarn ，就可以开始使用。

这里有一个非常简短的例子，说明如何在纯HTML中绘制图表。我们将在我们的应用程序中扩展这段代码，根据数据绘制图表。

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
 </head>
 <body>

   <div>
     <canvas id="myChart" width="200" height="200"></canvas>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const 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], // Data on Y axis
           borderWidth: 1
       }]
   }
});
</script>
 </body>
</html>

上面的HTML页面从一个遥远的地方加载Chart.JS ，创建一个HTML节点id=mychart ，并通知Chart.JS使用硬编码的数据渲染一个简单的柱状图。

✨ 把它放在一起

考虑这样一个场景：一家零售店想跟踪它每个月有多少客户，它一个月的销售额是多少，以及当前月的产品销售情况。

index.html 页面包含三个独立的图表。

  • 每月顾客的线形图
  • 每月销售额的柱状图
  • 显示不同产品销售情况的饼状图

实现所要求的功能的相关文件提到如下。

  • 👉app.py - 引导应用程序捆绑所有资源
  • 👉api - 实现一个简单的API，为数据库数据提供服务。
  • 👉models - 为我们的绘图实验定义了表格
  • 👉data_loader.py - 在DB中加载样本数据的实用文件
  • 👉index.html - 是用Bootstrap 5设计的展示层。
  • 👉custom.js - 通过API服务提取数据并填充图表
< PROJECT ROOT >
   |
   |-- app.py            # Create and start the APP object
   |-- api.py            # Simple API node 
   |-- models.py         # app models
   |
   |-- data_loader.py    # Save the data in DB
   |
   |-- templates
   |    |-- index.html   # Simple page styled with BS5 
   |
   |-- static
   |    |-- js/custom.js # Code the Charts
   |
   |-- *******************

👉_1F7E9↩️如何使用该样本

如果你的工作站已经安装了Python和GIT，那么在终端输入几个命令就可以轻松地编译这个样本了。

👉 克隆源

$ git clone https://github.com/app-generator/blog-sample-flask-charts.git
$ cd blog-sample-flask-charts

👉 使用虚拟环境安装模块

$ virtualenv env
$ source env/bin/activate
$ pip3 install -r requirements.txt

👉 设置环境

$ export FLASK_APP=app.py
$ export FLASK_ENV=development

👉 从数据目录加载样本数据

中定义的自定义命令来加载信息。app.py

# Content of app.py (truncated)

...

@app.cli.command("load-data")
def load_data():
    db.create_all()
    ...

通过调用自定义Flask命令加载数据

$ flask load-data

一旦所有上述命令被执行，我们应该能够看到所有的图表。line,bar, 和pie 。

Flask Charts - Flask-RestX and Charts.JS (provided by AppSeed)

谢谢你的阅读!如需更多资源，请随时访问：

avatar
文章
阅读
粉丝