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

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