chartkick+flask画报表

Chartkick是一个图表绘制工具,特点是UI美观、使用简单,并且支持IE6在内的大多数浏览器。chartkick 可以画 javascript 报表, 界面比较美观 ,其支持加载Google Charts 和 Highcharts图形库,而且支持集成Django, Flask/Jinja2框架  。Flask是一个轻量级的Web应用框架, 使用Python编写。基于 WerkzeugWSGI工具箱和 Jinja2模板引擎。使用 BSD 授权。

flask + chartkick 需要先安装chartkick.py 模块。以下是一个demo实现的图形界面:

chartkick

代码结构如下:

[root@361way chartkick]# tree
.
├── run.py
├── static
│   ├── chartkick.js
│   ├── highcharts.js
│   └── jquery.min.js
└── templates
    └── index.html

一、run.py

代码如下:

[root@361way chartkick]# cat run.py
from flask import Flask, jsonify, render_template, request
import chartkick
#app = Flask(__name__, static_folder=chartkick.js())
app = Flask(__name__)
app.jinja_env.add_extension("chartkick.ext.charts")
@app.route('/')
@app.route('/index')
def index():
    data = {'Chrome': 52.9, 'Opera': 1.6, 'Firefox': 27.7}
    return render_template('index.html', data=data)
if __name__ == "__main__":
    app.run(host="0.0.0.0",debug=True)  

二、index.html

模板代码如下:

[root@361way chartkick]# cat run.py
from flask import Flask, jsonify, render_template, request
import chartkick
#app = Flask(__name__, static_folder=chartkick.js())
app = Flask(__name__)
app.jinja_env.add_extension("chartkick.ext.charts")
@app.route('/')
@app.route('/index')
def index():
    value = {'Chrome': 52.9, 'Opera': 1.6, 'Firefox': 27.7}
    return render_template('index.html', data=value)
if __name__ == "__main__":
    app.run(host="0.0.0.0",debug=True)
[root@361way chartkick]# cat templates/index.html
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>  -->
<script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='highcharts.js') }}"></script>
<script src="{{ url_for('static', filename='chartkick.js') }}"></script>
{% bar_chart data with style="width:200px; height:20px;" %}
{% pie_chart data %} 

由于测试主机上不能上外网,所以这里将js文件下载到了本地,并配置为url_for路径。

python run.py运行后,在浏览器中打开http://127.0.0.1:5000就可以看到上面截图的效果了。

三、乱码问题

使用中文数据时会遇到乱码问题,解决方法是用 json 的 dumps 方法 将 dict 或者 list 转换成可以正常显示的中文字符串。如下:

#先import json模块
return render_template('index.html', data=value)
更换为
return render_template('index.html', data=json.dumps(value, encoding='utf-8',indent=4))

参考页面:chartkick.py模块页面




本站的发展离不开您的资助,金额随意,欢迎来赏!

You can donate through PayPal.
My paypal id: itybku@139.com
Paypal page: https://www.paypal.me/361way

  1. on the road
    2015年10月18日21:17 | #1

    请教博主个问题,按照配置程序运行正常,但是网页上一直loading状态,flask 返回的状态码是200

    • admin
      2015年10月19日23:48 | #2

      换个浏览器试下,这个我记得在测试在发现过有浏览器支持不完美的问题。

  2. dsystem
    2015年11月7日14:41 | #3

    博主,我们打开就剩下两个loading ,什么都没有,也不报错

  3. dsystem
    2015年11月7日14:53 | #4

    已解决,jquery.js文件名称不对

  1. 本文目前尚无任何 trackbacks 和 pingbacks.