zoukankan      html  css  js  c++  java
  • 【python系列】python画报表(Chartkick、Flask)(附中文乱码解决方式)


    chartkick 能够画 javascript 报表, 并且比較美观。可是网上搜了下。非常难找到 python 版本号的,于是查了些资料,摸索了下。


    对 Flask 也不非常熟悉,这里就仅仅抛砖引玉了,假设有对这方面比較熟悉,还希望能贴点资料的链接。


    chartkick简单介绍


    Chartkick是一个图表绘制工具,特点是UI美观、使用简单,而且支持IE6在内的大多数浏览器。

    之所以说它使用简单,是由于仅仅须要一行Ruby代码就可以绘制出美丽的图表!

     



    Flask简单介绍


    Flask是一个轻量级的Web应用框架, 使用Python编写。基于 WerkzeugWSGI工具箱和 Jinja2模板引擎。使用 BSD 授权。




    代码结构





    run.py


    from flask import Flask, jsonify, render_template, request
    import chartkick
    
    app = Flask(__name__, static_folder=chartkick.js())
    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(debug=True)


    index.html


    index.html须要放在templates目录下

    内容为

    <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='chartkick.js') }}"></script>
    
    {% bar_chart data with style="200px; height:20px;" %}
    {% pie_chart data %}


    效果


    执行run.py,然后訪问所显示的地址



    这里为 http://127.0.0.1:5000/

    网页内容为




    中文乱码解决方式


    用 json 的 dumps 方法 将 dict 或者 list 转换成能够正常显示的中文字符串。

    当中 

    return render_template('index.html', data=data)

    能够换成

    return render_template('index.html', data=cCode.str(data))

    cCode 是自己写的类,请參考《【python系列】dict、list的中文显示 》 http://blog.csdn.net/ksearch/article/details/35241019


    參考资料


    1. Create beautiful Javascript charts with minimal code https://github.com/mher/chartkick.py


    3. flask高速上手  http://dormousehole.readthedocs.org/en/latest/quickstart.html


  • 相关阅读:
    Jquery想说爱你不容易
    关于css
    sass相关实例
    web前端学习之HTML
    web前端学习
    软件工程来换网前端设计
    关于前端开发的相关资料及例子
    四则运算
    自我介绍
    关于读完《软件工程》之后不解的问题
  • 原文地址:https://www.cnblogs.com/wzzkaifa/p/6815759.html
Copyright © 2011-2022 走看看