一般中小型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图表展示带来意想不到的效果。