重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何在Flask中使用Pyecharts实现在单个页面展示多个图表-创新互联

如何在Flask中使用Pyecharts实现在单个页面展示多个图表?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联公司是一家以网站建设、网页设计、品牌设计、软件运维、seo优化、小程序App开发等移动开发为一体互联网公司。已累计为雨棚定制等众行业中小客户提供优质的互联网建站和软件开发服务。

方法1、原生echarts方法

自己在前端引入echarts.js文件、自己创建div、自己初始化echarts对象、自己从官网复制并且配置图表、自己给echarts对象设置配置项实现绘制,这种方法的缺点是配置项都是js的形式比较繁琐,对于后端开发人员来说有点过于参与前端js部分的配置开发;

这种方式参照echarts官网的方式,其实跟flask没有多大关系,php/java不同后端语言都一样,地址

方法2:使用pyecharts

pyecharts主要是做了一件事情,把js的配置option,完全抽离使用Python代码配置,把js的数据结构使用python的代码结构实现,让后端开发只需要配置数据就能搞定图表,真的很像matplotlib,当然echarts的强大使得pyecharts更强大;

但是这里真的要吐槽pyecharts,因为它包含多种输出图表结果的方式,没有一种是能够和flask完美配合的:

  • render()方法:默认会在当前目录生成 render.html 文件;这是什么鬼,什么场景会用到这种方式,竟然是默认的方式?真是怪异;

  • render()方法传入路径参数:传入路径参数,如 bar.render(“mycharts.html”),这种方法好一点,可以设定文件路径,但是为毛要输出一个HTML,另外一点,我做一个网页,难道这个网页上除了这个图表没有其他数据和展示了?只有一个大大的echarts图表?

  • render_notebook()方法:这个方法能用在notebook中,这个我不吐槽,因为如果使用notebook,这个方法很好用,但是我要用于flask网页展示;

  • render_embed()方法:来自pyecharts的flask一章中的Markup(c.render_embed()),我估计作者根本没写过flask代码,不然为毛flask网页中只能展示一个echarts图表,我其他的数据展示,怎么用这个方法设置?我试图把render_embed()的结果传递给flask模板,结果发现这个函数的返回是一个整个HTML;

  • chart.dump_options()方法:这个方法是唯一一个我觉得能和flask配合不错的方法,能够实现一个flask网页中绘制很多个图表;然而却依然需要自己引入echarts.js文件、自己设定div、自己初始化echarts对象、自己给echarts对象设置图表配置,唯一简化的就是图表配置是来自于python服务端;

最后给出使用chart.dump_options()方法给一个flask网页配置多个图表的方法代码:

Python代码:

@app.route("/show_pyecharts")
def show_pyecharts():
  bar = (
    Bar()
      .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
      .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
  )
  # print(bar.render_embed())
  # print(bar.dump_options())
  return render_template(
    "show_pyecharts.html",
    bar_data=bar.dump_options()
  )

Flask模板代码:




  
  Title
  


柱状图

     
       // 基于准备好的dom,初始化echarts实例     var myChart = echarts.init(document.getElementById('main'));     // 使用刚指定的配置项和数据显示图表。     myChart.setOption({{ bar_data | safe }});           
       // 基于准备好的dom,初始化echarts实例     var myChart2 = echarts.init(document.getElementById('main2'));       // 指定图表的配置项和数据     var option2 = {{ bar_data | safe }};       // 使用刚指定的配置项和数据显示图表。     myChart2.setOption(option2);   
 

展示输出:

如何在Flask中使用Pyecharts实现在单个页面展示多个图表

看完上述内容,你们掌握如何在Flask中使用Pyecharts实现在单个页面展示多个图表的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享题目:如何在Flask中使用Pyecharts实现在单个页面展示多个图表-创新互联
链接分享:http://cqcxhl.cn/article/dggcoe.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP