flask+bootstrap实现dashboard中的统计图表

就是在dashboard首页有个图表统计直观展示一些数据，本例用的是用户的角色及统计。

图上信息可以看到，用户100个，四种角色以及角色的人数和占比，以此类推可以统计一些其他的信息。以下我尝试简单的阐述一下实现：

文件结构

这里只是蓝图的结构，主要用到的是views.py视图函数，models.py定义Dashboard类，提供一些查询方法，以及模板文件dashboard.html。

views.py视图函数

@admin.route('')def dashboard():    group_and_count_users = Dashboard.group_and_count_users()    return render_template('admin/page/dashboard.html',                           group_and_count_users=group_and_count_users)

可以看到视图函数非常简单，因为展示的数据内容也不提供什么其他操作，所以只是简单的返回一个模板文件。我们只要关注传入的group_and_count_users这个参数就可以了，这是展示内容所需的数据，来自于数据库的查询。

Dashboard

# coding: utf-8from sqlalchemy import funcfrom pms.blueprints.user.models import User, dbclass Dashboard(object):    @classmethod    def group_and_count_users(cls):        """        执行分组/统计所有用户数量        :return: dict        """        return cls._group_and_count(User, User.role)    @classmethod    def _group_and_count(cls, model, field):        """        根据指定的model和field统计。        :param model: Name of the model        :type model: SQLAlchemy model        :param field: Name of the field to group on        :type field: SQLAlchemy field        :return: dict        """        # 构建SQL函数表达式，为了计数各个field        count = func.count(field)        # 得到(数量, field)tuple 的列表        query = db.session.query(count, field).group_by(field).all()        results = {            'query': query,            'total': model.query.count()        }        return results

Dashboard类下定义了两个classmethod，一个是group_and_count_users，其实只是调用了_group_and_count这个方法，传入指定的model和field去查询数据。这样做是方便以后可以添加其他的方法，比如对Billing，Payments等的查询统计，只要传入对应的model和field就可以了。

对于sqlalchemy的用法不清楚的可以查询官方文档，或者自己定义一个简单的User类，然后打印一下query的内容方便理解。

# 得到(数量, field)tuple 的列表query = db.session.query(count, field).group_by(field).all()

这里重点看下这行，因为它就是我们统计百分比需要的重点数据，各个角色及对应的数量，这句查询就是根据角色分组并统计相应的数量，返回结果是一个list，中间是由(COUNT,ROLE)这样形式的tuple构成的。这样我们返回的results这个dict就包含了我们统计想要的数据了。

将这些数据传入模板后，就要靠bootstrap来处理了。

dashboard.html

为了方便我用# 直接在代码中注释需要关注的内容。更多可以这里的讲解。

{% extends 'layouts/app.html' %}{% block body %}  <div class="row">    <div class="col-md-4">      # 创建一个基本面板      <div class="panel panel-default">        # 添加面板标题        <div class="panel-heading">          <a href="{{ url_for('admin.index') }}">Users</a>          # 靠右对齐用户数量的值          <span class="pull-right text-muted">            {{ group_and_count_users.total }}          </span>        </div>        # 面板内容        <div class="panel-body">          # 遍历传入的group_and_count_users参数，query键对应角色数据count，field          {% for item in group_and_count_users.query %}            # 计算percent的值，并用round过滤器保留整数部分            {% set percent = ((item[0] / group_and_count_users.total) * 100) | round %}            <h5>              # 获取role，并用title过滤器大写首字母              {{ item[1] | title}}              # role的数量              <span class="text-muted">({{ item[0] }})</span>            </h5>            # progress是bootstrap提供的进度条，progress-striped条纹可选可选，active动画效果可选            <div class="progress progress-striped active">              # 当前进度，最小进度，最大进度，style为占有宽度百分比              <div class="progress-bar" role="progressbar"                   aria-valuenow="{{ percent }}" aria-valuemin="0"                   aria-valuemax="100" style="width: {{ percent }}%;">                {{ percent }}%              </div>            </div>          {% endfor %}        </div>      </div>    </div>  </div>{% endblock %}

总结所有的流程就是，通过视图函数获得展示所需的数据并传入模板文件，通过jinja2和bootstrap提供的panel面板及progress进度条组件展示效果。这种模式还常见于评分系统的分数分布。