flask-admin章节一:使用chartkick画报表

时间:2022-04-01 05:23:47

一般中小型WEB整体来看逻辑比较简单些,一般都是基于数据库的增删改查。不过通过数据库查询到的记录直接展示给用户不是很直观,大家其实蛮期待有一个报表

直接展示他们期待的内容。

这块就涉及到数据的提取和展示,数据的提取就不需要过多涉及了,就是一些不同的SQL查询。

数据的展示,就需要有各种开源javascript库的支持。毕竟自己去写一套图表展示javascript库是不太现实的,需要投入太多的经历,而且开源里也有很多实现。

开源实现报表功能的javascript库还是蛮多的,不过我比较推荐使用chartkick。不仅能够完全满足要求,而且相当简洁,使用起来比较方便。

关于chartkick的介绍大家可以看下http://chartkick.com/

在flask admin中的使用

  页面编辑

在flask admin中使用chartkick还是蛮简单的:

{% extends 'admin/master.html' %}

{% block tail %}
{{ super() }}
<script src="{{ url_for('static', filename='coverage/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='highcharts.js') }}"></script>
<script src="{{ url_for('static', filename='chartkick/js/chartkick.js') }}"></script>
{% line_chart data with style="width:200px; height:20px;" %}
{% endblock %}

上述代码中extends和block语句大家可以忽略掉,是jinja2的模板,这块会稍微介绍下它的功能。

{% extends 'admin/master.html' %}

这行语句的作用是集成master.html jinja2模板,对于想对外提供统一视图的WEB来说把基本的框架放到一个基本的jinja2模板中,所以其他的HTML继承这个模板是相关管用的。

{% block tail %}

这行语句的作用是继承admin/master.html模板中的tail blcok。关于extends和block语句的介绍大家可以参阅:http://docs.jinkan.org/docs/jinja2/

真正起作用的是:

<script src="{{ url_for('static', filename='coverage/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='highcharts.js') }}"></script>
<script src="{{ url_for('static', filename='chartkick/js/chartkick.js') }}"></script>
{% line_chart data with style="width:200px; height:20px;" %}

 这四行语句,前三行比较好理解:就是导入JavaScript库,对于url_for语句大家可能不是很熟悉。对于上面例子,就直接理解为是在static目录下导入这些文件。

真正画图标的就是最后一条语句,相当简洁,而且也特别方便。上面画的是线性图表,对于其他各种类型的图标,chartkick也提供了对应的支持,使用同上面一样简洁。

flask admin application渲染页面

  在flask admin中渲染页面也是非常简单,对于flask admin只需要提供如下代码就可以了:

@app.route('/')
def index():
data = {}
# 增加自己想要展示的数据
return render_teaplate('chartkick.html', data=data)

 出现的问题

  真正这么使用,发现页面并没有渲染出来,而且还一直报错。报这样的错误:

{% line_chart data with style="width:200px; height:20px;" %}
TemplateSyntaxError: Encountered unknown tag 'line_chart'. Jinja was looking for the following tags: 'endblock'. The innermost block that needs to be closed is 'block'.

然后大家就会很费解,怎么会出现这样的错误啊。我明明所有的JavaScript库都导入了啊,并且代码也跟官网上面的例子一模一样。

无论怎么确定就是没有问题,但是就是始终报错。

如何拍错

  对于这种情况下,你就应该冷静下来想想。对于line_chart语句,你会发现跟jinja2的模板语句类似,而且上面报错也出现了Jinja相关的字眼。这个时候,你大可以怀疑下line_chart具体是什么。

查询下chartkick库的代码,你会出现line_chart其实是注册到jinja2模板中的函数:

from ..template import CHART_HTML
from ..options import Options register = template.Library()
register.tag('line_chart', functools.partial(chart, 'LineChart'))

但这个并不是jinja2系统自带的,在使用的时候直接导入可以了。

所以,在定义在定义app的下面增加以下语句就可以了:

app = Flask(__name__)
app.jinja_env.add_extension("chartkick.ext.charts")

  小结

chartkick还是蛮强大的,使用好chartkick会给WEB图表展示带来意想不到的效果。