精华内容
下载资源
问答
  • 下面的图表是静态的,但是由于我会在我的Flask应用程序上每秒推送数据,所以我想知道如何使其成为动态的。我试图搜索示例,但我找到的只有Javascript,而不是Python。在Python可以用这个图表实时更新吗?有什么建议...

    下面的图表是静态的,但是由于我会在我的Flask应用程序上每秒推送数据,所以我想知道如何使其成为动态的。我试图搜索示例,但我找到的只有Javascript,而不是Python。在

    Python可以用这个图表实时更新吗?有什么建议吗?在def index():

    rng = pd.date_range('1/1/2011', periods=7500, freq='H')

    ts = pd.Series(np.random.randn(len(rng)), index=rng)

    graphs = [

    dict(

    data=[

    dict(

    x=[1, 2, 3],

    y= arr,

    type='scatter'

    ),

    ],

    layout=dict(

    title='first graph'

    )

    )

    ]

    ids = ['graph-{}'.format(i) for i, _ in enumerate(graphs)]

    graphJSON = json.dumps(graphs, cls=plotly.utils.PlotlyJSONEncoder)

    return render_template('index.html',

    ids=ids,

    graphJSON=graphJSON)

    展开全文
  • 本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀...Flask 模板渲染1. 新建一个项目 flask-echarts在编辑器中选择 New Project,...

    本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀...

    Flask 模板渲染

    1. 新建一个项目 flask-echarts

    在编辑器中选择 New Project,然后选择 Flask,创建完之后,Pycharm 会帮我们把启动脚本和模板文件夹都建好

    2. 拷贝 pyecharts 模板

    将链接中的以下模板 ├── jupyter_lab.html ├── jupyter_notebook.html ├── macro ├── nteract.html ├── simple_chart.html ├── simple_page.html └── table.html 全部拷贝到 tempaltes 文件夹中 github.com/pyecharts/p…

    3.渲染图表

    主要目标是将 pyecharts 生成的图表数据在视图函数中返回,所以我们直接在 app.py 中修改代码,如下:

    from flask import Flask

    from jinja2 import Markup

    from pyecharts import options as opts

    from pyecharts.charts import Bar

    app = Flask(__name__, static_folder="templates")

    def bar_base() -> Bar:

    c = (

    Bar()

    .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])

    .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])

    .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])

    .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))

    )

    return c

    @app.route("/")

    def index():

    c = bar_base()

    return Markup(c.render_embed())

    if __name__ == "__main__":

    app.run()

    直接运行,在浏览器中输入地址,直接将数据显示出来了

    这是一个很简单的静态数据展示,别急好戏还在后头~

    Flask 前后端分离

    前面讲的是一个静态数据的展示的方法,用 pyecharts 和 Flask 结合最主要是实现一种动态更新数据,增量更新数据等功能!以上面讲解的内容为基础,在 templates 文件夹中新建一个 index.html 的文件,其中主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依赖。

    index.html

    动态更新数据

    (

    function () {

    var result_json = '{{ result_json|tojson }}';

    // var result = JSON.parse(result_json);

    var chart = echarts.init(document.getElementById('bar'), 'gray', {renderer: 'canvas'});

    $.ajax({

    type: "GET",

    url: "http://127.0.0.1:5000/barChart",

    dataType: 'json',

    data: {result: result_json},

    success: function (result) {

    chart.setOption(result);

    }

    });

    }

    )

    有 html 基础的朋友应该知道该代码主要是向地址 "127.0.0.1:5000/barChart" 发送请求,所以在 app.py 中我们也需要做相应的修改,添加该地址的路由函数,从而实现动态数据更新。 部分代码如下:

    @app.route("/")

    def index():

    data = request.args.to_dict()

    return render_template("index.html", result_json=data)

    @app.route("/barChart")

    def get_bar_chart():

    args = request.args.to_dict()

    result = eval(args.get("result"))

    name = result.get("name")

    subtitle = result.get("subtitle")

    c = bar_base(name, subtitle)

    return c.dump_options_with_quotes()

    在 index 视图函数中接收浏览器传过来的参数,然后传递给 index.html。此处只是简单示例,所以未做参数校验。而另一个视图函数主要是获取参数,传给图表生成函数bar_base(),从而实现根据 url 地址传过来的参数,动态展示图表数据。结果如下:

    这里只是简单演示, 所以只将图表标题作为动态传参。此场景适用于第一次请求获取我们想要的数据,然后将其展示出来。比如我之前写的 NBA 球员数据可视化 mp.weixin.qq.com/s/WWCNf46Ch…

    就是此方法,不同球员展示对应球员数据!

    定时全量更新图表

    该场景主要是前端主动向后端进行数据刷新,定时刷新的核心在于 HTML 的 setInterval 方法。那么 index.html 代码就是下面这样的:

    Awesome-pyecharts

    var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

    $(

    function () {

    fetchData(chart);

    setInterval(fetchData, 2000);

    }

    );

    function fetchData() {

    $.ajax({

    type: "GET",

    url: "http://127.0.0.1:5000/barChart",

    dataType: 'json',

    success: function (result) {

    chart.setOption(result);

    }

    });

    }

    对应的将 app.py 中 bar_base()作相应的修改,从而实现定时全量更新图表

    def bar_base() -> Bar:

    c = (

    Bar()

    .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])

    .add_yaxis("商家A", [random.randint(10, 100) for _ in range(6)])

    .add_yaxis("商家B", [random.randint(10, 100) for _ in range(6)])

    .set_global_opts(title_opts=opts.TitleOpts(title="", subtitle=""))

    )

    return c

    @app.route("/")

    def index():

    return render_template("index.html")

    @app.route("/barChart")

    def get_bar_chart():

    c = bar_base()

    return c.dump_options_with_quotes()

    运行之后,在浏览器中打开,效果如下:

    看到这动图,有没有一种...,如果我是 DJ DJ,琦你太美...

    定时增量更新图表

    同样的要对 index.html 做修改

    Awesome-pyecharts

    var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

    var old_data = [];

    $(

    function () {

    fetchData(chart);

    setInterval(getDynamicData, 2000);

    }

    );

    function fetchData() {

    $.ajax({

    type: "GET",

    url: "http://127.0.0.1:5000/lineChart",

    dataType: "json",

    success: function (result) {

    chart.setOption(result);

    old_data = chart.getOption().series[0].data;

    }

    });

    }

    function getDynamicData() {

    $.ajax({

    type: "GET",

    url: "http://127.0.0.1:5000/lineDynamicData",

    dataType: "json",

    success: function (result) {

    old_data.push([result.name, result.value]);

    chart.setOption({

    series: [{data: old_data}]

    });

    }

    });

    }

    增量更新,后端代码也需要相应的修改

    from pyecharts.charts import Line

    def line_base() -> Line:

    line = (

    Line()

    .add_xaxis(["{}".format(i) for i in range(10)])

    .add_yaxis(

    series_name="",

    y_axis=[randrange(50, 80) for _ in range(10)],

    is_smooth=True,

    label_opts=opts.LabelOpts(is_show=False),

    )

    .set_global_opts(

    title_opts=opts.TitleOpts(title="动态数据"),

    xaxis_opts=opts.AxisOpts(type_="value"),

    yaxis_opts=opts.AxisOpts(type_="value"),

    )

    )

    return line

    @app.route("/")

    def index():

    return render_template("index.html")

    @app.route("/lineChart")

    def get_line_chart():

    c = line_base()

    return c.dump_options_with_quotes()

    idx = 9

    @app.route("/lineDynamicData")

    def update_line_data():

    global idx

    idx = idx + 1

    return jsonify({"name": idx, "value": randrange(50, 80)})

    走起,来看看效果吧

    总结

    以上所述是小编给大家介绍的利用 Flask 动态展示 Pyecharts 图表数据方法小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    展开全文
  • 本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀…Flask 模板渲染1. 新建一个项目flask_pyecharts在编辑器中选择 New Project,...

    本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀…

    Flask 模板渲染

    1. 新建一个项目flask_pyecharts

    在编辑器中选择 New Project,然后选择 Flask,创建完之后,Pycharm 会帮我们把启动脚本和模板文件夹都建好

    2. 拷贝 pyecharts 模板

    将链接中的以下模板

    ├── jupyter_lab.html

    ├── jupyter_notebook.html

    ├── macro

    ├── nteract.html

    ├── simple_chart.html

    ├── simple_page.html

    └── table.html

    全部拷贝到 tempaltes 文件夹中

    https://github.com/pyecharts/pyecharts/tree/master/pyecharts/render/templates

    3.渲染图表

    主要目标是将 pyecharts 生成的图表数据在视图函数中返回,所以我们直接在 app.py 中修改代码,如下:

    from flask import Flask

    from jinja2 import Markup

    from pyecharts import options as opts

    from pyecharts.charts import Bar

    app = Flask(__name__, static_folder="templates")

    def bar_base() -> Bar:

    c = (

    Bar()

    .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])

    .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])

    .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])

    .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))

    )

    return c

    @app.route("/")

    def index():

    c = bar_base()

    return Markup(c.render_embed())

    if __name__ == "__main__":

    app.run()

    直接运行,在浏览器中输入地址,直接将数据显示出来了

    这是一个很简单的静态数据展示,别急好戏还在后头~

    Flask 前后端分离

    前面讲的是一个静态数据的展示的方法,用 pyecharts 和  Flask 结合最主要是实现一种动态更新数据,增量更新数据等功能!以上面讲解的内容为基础,在 templates 文件夹中新建一个 index.html 的文件,其中主要用到了 jquery 和 pyecharts 管理的 echarts.min.js 依赖。

    index.html

    动态更新数据

    (

    function () {

    var result_json = '{{ result_json|tojson }}';

    // var result = JSON.parse(result_json);

    var chart = echarts.init(document.getElementById('bar'), 'gray', {renderer: 'canvas'});

    $.ajax({

    type: "GET",

    url: "http://127.0.0.1:5000/barChart",

    dataType: 'json',

    data: {result: result_json},

    success: function (result) {

    chart.setOption(result);

    }

    });

    }

    )

    有 html 基础的朋友应该知道该代码主要是向地址 "127.0.0.1:5000/barChart" 发送请求,所以在 app.py 中我们也需要做相应的修改,添加该地址的路由函数,从而实现动态数据更新。

    部分代码如下:

    @app.route("/")

    def index():

    data = request.args.to_dict()

    return render_template("index.html", result_json=data)

    @app.route("/barChart")

    def get_bar_chart():

    args = request.args.to_dict()

    result = eval(args.get("result"))

    name = result.get("name")

    subtitle = result.get("subtitle")

    c = bar_base(name, subtitle)

    return c.dump_options_with_quotes()

    在 index 视图函数中接收浏览器传过来的参数,然后传递给 index.html。此处只是简单示例,所以未做参数校验。而另一个视图函数主要是获取参数,传给图表生成函数 bar_base(), 从而实现根据 url 地址传过来的参数,动态展示图表数据。结果如下:

    这里只是简单演示, 所以只将图表标题作为动态传参。此场景适用于第一次请求获取我们想要的数据,然后将其展示出来。比如我之前写的 NBA 球员数据可视化

    就是此方法,不同球员展示对应球员数据!

    定时全量更新图表

    该场景主要是前端主动向后端进行数据刷新,定时刷新的核心在于 HTML 的 setInterval 方法。那么 index.html 代码就是下面这样的:

    Awesome-pyecharts

    var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

    $(

    function () {

    fetchData(chart);

    setInterval(fetchData, 2000);

    }

    );

    function fetchData() {

    $.ajax({

    type: "GET",

    url: "http://127.0.0.1:5000/barChart",

    dataType: 'json',

    success: function (result) {

    chart.setOption(result);

    }

    });

    }

    对应的将 app.py 中 bar_base() 作相应的修改,从而实现定时全量更新图表

    def bar_base() -> Bar:

    c = (

    Bar()

    .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])

    .add_yaxis("商家A", [random.randint(10, 100) for _ in range(6)])

    .add_yaxis("商家B", [random.randint(10, 100) for _ in range(6)])

    .set_global_opts(title_opts=opts.TitleOpts(title="", subtitle=""))

    )

    return c

    @app.route("/")

    def index():

    return render_template("index.html")

    @app.route("/barChart")

    def get_bar_chart():

    c = bar_base()

    return c.dump_options_with_quotes()

    运行之后,在浏览器中打开,效果如下:

    看到这动图,有没有一种…,如果我是 DJ DJ,琦你太美…

    定时增量更新图表

    同样的要对 index.html 做修改

    Awesome-pyecharts

    var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

    var old_data = [];

    $(

    function () {

    fetchData(chart);

    setInterval(getDynamicData, 2000);

    }

    );

    function fetchData() {

    $.ajax({

    type: "GET",

    url: "http://127.0.0.1:5000/lineChart",

    dataType: "json",

    success: function (result) {

    chart.setOption(result);

    old_data = chart.getOption().series[0].data;

    }

    });

    }

    function getDynamicData() {

    $.ajax({

    type: "GET",

    url: "http://127.0.0.1:5000/lineDynamicData",

    dataType: "json",

    success: function (result) {

    old_data.push([result.name, result.value]);

    chart.setOption({

    series: [{data: old_data}]

    });

    }

    });

    }

    增量更新,后端代码也需要相应的修改

    from pyecharts.charts import Line

    def line_base() -> Line:

    line = (

    Line()

    .add_xaxis(["{}".format(i) for i in range(10)])

    .add_yaxis(

    series_name="",

    y_axis=[randrange(50, 80) for _ in range(10)],

    is_smooth=True,

    label_opts=opts.LabelOpts(is_show=False),

    )

    .set_global_opts(

    title_opts=opts.TitleOpts(title="动态数据"),

    xaxis_opts=opts.AxisOpts(type_="value"),

    yaxis_opts=opts.AxisOpts(type_="value"),

    )

    )

    return line

    @app.route("/")

    def index():

    return render_template("index.html")

    @app.route("/lineChart")

    def get_line_chart():

    c = line_base()

    return c.dump_options_with_quotes()

    idx = 9

    @app.route("/lineDynamicData")

    def update_line_data():

    global idx

    idx = idx + 1

    return jsonify({"name": idx, "value": randrange(50, 80)})

    走起,来看看效果吧

    展开全文
  • 我对Python/flask还比较陌生,有些数据库方面的东西也有问题。我能够在不同的函数中连接到MySQL数据库,并从使用...然而,似乎什么也没有显示出来,即使是现有的数据,使我相信我在下面的第二段代码中错了什么。当...

    我对Python/flask还比较陌生,有些数据库方面的东西也有问题。

    我能够在不同的函数中连接到MySQL数据库,并从使用wtforms插入数据库的用户那里获得表单输入。现在我想使用jinja模板以表格式在“dashboard”页面上显示数据库中存储的数据。每次有人提交新表单时,我都希望表扩展以包含该数据。

    然而,似乎什么也没有显示出来,即使是现有的数据,使我相信我在下面的第二段代码中做错了什么。当我运行python文件时,我没有得到任何错误,所以也许我做错了HTML模板?

    数据库连接(dbconnect.py):import MySQLdb

    def connection():

    # Edited out actual values

    conn = MySQLdb.connect(host="",

    user="",

    passwd="",

    db = "")

    c = conn.cursor()

    return c, conn

    主python代码(不知道是否需要try/except):from dbconnect import connection

    from flask import Flask, render_template

    @app.route('/dashboard/')

    def display_deals():

    try:

    c, conn = connection()

    query = "SELECT * from submissions"

    c.execute(query)

    data = c.fetchall()

    conn.close()

    return data

    return render_template("dashboard.html", data=data)

    except Exception as e:

    return (str(e))

    HTML格式:

    {% for row in data %}

    {% for d in row %}

    {{ d }}

    {% endfor %}

    {% endfor %}

    展开全文
  • 在Flask页面展示echarts,主要有两种方法:方法1、原生echarts方法自己在前端引入echarts.js文件、自己创建div、自己初始化echarts对象、自己从官网复制并且配置图表、自己给echarts对象设置配置项实现绘制,这种...
  • 图表让人心累,既要设置数据又要调整格式,遇上非常规图表,更是难难难。如果你想偷懒,想2019年大吉大利,今天这4种一键生成的图表可不要错过。今天的图表不是用图表功能制作的,也不是迷你图,而是用REPT函数生成...
  • Excel图表对于用到Excel的人来说应该不会陌生,在展示数据的时候,图表的方式能够让人看起来更加的直观。今天我们就来看一下常见的折线图如何进行优化。...高级图表:下面我们就来看一下优化后的折线图显示出来的效...
  • 最常见的就是下边这样的逻辑图表:如果是你来,中间这个逻辑图怎么在PPT里面完成呢?画一个形状,然后环形复制排列?好像也太复杂了一些,还不摆到手残……不怕,下来就教大家简单4步,用饼图完成这种类型的逻辑...
  • 数据分析就是将数据以各种图表的形式展现给领导,供领导决策用,因此熟练掌握饼图、柱状图、线图等图表制作是一个数据分析师必备的技能。Python有两个比较出色的图表制作框架,分别是Matplotlib和Pyechart。本文...
  • 扫码加好友就送干货福利开课一周内对课程不满意支持退款大家好,我是你们的秋小叶~ PPT 的时候,大多数人总会碰到如何选择图表类型、如何美化图表的问题。今天一口气给你们带来了培锴的超全图表干货!相信你们看完...
  • 嗨,各位木友好呀!我是装P编辑部的拾二。最近我在Bribbble上摸鱼学习...不慌,我手把手示范给大伙儿看看怎么在PPT做出这些数据图表~质感折线图首先我们来看第一张图表:分析一下,这张图表其实是一个由【折线图】和...
  • 最近的一个项目的其中一个页面有图表展示数据的需求,有柱状图、折线图和饼图,于是引入了强大的echarts. echarts的强大之处和有点这里就不多说了,详细请参照echarts官网和echarts在线demo。 但是我们的页面要...
  • 月底又要费用支出报表了,小编的同事在Excel中...那怎么图表进行数据标记呢?下面我们就来学习一下Excel图表数据标签的使用方法。首先,打开我们需要做数据统计的工作表,选中数据,点击工具栏插入-图表,在...
  • 昨天社群里有个小伙伴丢给我一张类似下面这样的图片,问我怎么做出里面这种百分比图:这种图表的制作其实是用到了障眼法,我拆解一下源文件你就能明白我在哔哔什么了:▲动图演示看懂了吗?看不懂也没关系,接下来我...
  • 工作中大家图表大都千篇一律,那如何利用最简单的数据做出一份高大上的图表呢?今天给大家分享一个堆积柱形图的案例。如下图,这是一份公司业务员销售额数据,列出了各业务员的销售额和需要完成的指标。下图是...
  • 数据库库中存着 图表显示数据数据是以时间为导向的。例如: 一天有96个时段。每个时段有每个时段的统计值。 现在要成一个类似动画的展现,就是每过一秒钟就要显示一个时段的统计值图表。这个怎么实现?
  • 我已经用python3写好了调用matplotlib生成的数据图表,现在想一个界面,在界面里的某一个位置显示这张图,在网上看了很多matplotlib跟pyqt5关联的例子,自己尝试都没有显示成功,求大神指点
  • 右键点选图表数据区域,选择数据,看到切换行列字样,点击可以完成在EXCEL中做图表,横坐标和纵坐标如何调换?通过选择数据那里作更改,把列改成行,行改成列要显示颜色差异,更改图标类型就可以,表格有选择这样的...
  • Excel报表分析,涉及到数据对比,图表和表格两种表达形式,老板肯定更青睐图表。因为图表更能形象地表示数据之间的关系,可以比较数据的差距,让人一目了然。例如:如果,你的报表是这样子:人家的报表是这样子:...
  • 首先推荐 highcharts 中文网站,http://www.hcharts.cn/,可以先看看最基本的例子,以及highcharts怎么配置,下面就结合目前所的总结下hightCharts (1)hightCharts配置项  title,subtitle,colors,xAxis,yAxis,...
  • 昨天社群里有个小伙伴丢给我一张类似下面这样的图片,问我怎么做出里面这种百分比图:这种图表的制作其实是用到了障眼法,我拆解一下源文件你就能明白我在哔哔什么了:▲动图演示看懂了吗?看不懂也没关系,接下来我...
  • 有了它,你就是数据透视表、公式、图表甚至 VBA 和 PowerQuery 的专家。然而,尽管你可以快速处理解决方案,但在你得到结果之前,电子表格已经扩展到数十个标签页、上千行以及数不清的 VBA——这使得它的可读性和可...
  • 》就是直接以分组柱状图范例的。可真正上手的时候,你会发现会遇到各种小问题,比如除了“宽”型数据,“长”型数据能不能绘制呢?最重要的是如何在坐标轴下添加分组表格呢?下面就以分组柱状图为例,为大家介绍...
  • 编按:有同学在群里问怎么表达两个月数据的变化,...先看一段求助:同学:请问一下,我图表想表现出本月数据,上月数据,同比和环比怎么做?老师:同学,有详细的数据吗?同学:老师,就像这种的,请问我要怎么做...
  • 柱状图、饼状图、折线图、散点图,数据分析图表有很多,用excel就可以生成,但是本文我想告诉你的是,通过这些图表怎么做分析?常见的6种数据分析图表及应用方式:1.柱状图:用于比较柱状图是最基础的一种图表,...
  • ——列夫·托尔斯泰不知道大家在Excel图表时,有没有遇到过这种情况,就是Excel图表的横轴文字过长,在图表显示就是自动倾斜,看起来也不美观,就比如下面这样。那如果我不想让它倾斜显示,让横坐标轴自动换行,...
  • 如何在同一张图表上并排绘制同一数据的列散点图和箱线图?箱线图和散点图分别展示了数据的不同方面,那我们如何使用GraphPad Prism 8绘图,让他们同时显示在图形中呢?下面跟我一步一步的实现吧。首先创建一个新的...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 172
精华内容 68
关键字:

做图表怎么显示数据