您当前的位置:首页 > 互联网百科 > 大数据

Flask 数据可视化

时间:2022-07-17 16:23:44  来源:  作者:VT漫步

数据可视化是数据处理中的重要部分,前面我们了解了 Flask 的开发和部署,如何用 Flask 做数据可视化呢?今天我们来了解一下。

Python/ target=_blank class=infotextkey>Python 语言极富表达力,并且拥有众多的数据分析库和框架,是数据分析的首选;

echarts,最初由百度团队开发,现在已独立成 Apache 旗下一款国际化产品,是基于 Web 的数据可视化框架,API 简单明了,应用极为广泛;

Python 和 echarts 的完美结合就是 pyecharts

pyecharts 简介

pyecharts 使得可以用 Python 语言,完成 echarts 中对图表的各种操作,并且让编写代码更便利

pyecharts 中的概念和 echarts 是想通的,对于刚接触的同学,无论从 pyecharts 还是 echarts 开始了解都可以

图表类

pyecharts 中的图表都是类,都继承自 Base 基类,构造函数接受一个 init_opts 参数,用于设置图表的属性

意下是常用 API 接口:

  • add_js_func:将 js 脚本附加在图表 html
  • set_global_opts:设置图表属性
  • render:渲染出图表的 Html 文件
  • dump_options_with_quotes:将图表所有设置导出为 json,用于前后分离

全局配置

pyecharts 将图表中和数据无关的属性,集中在全局配置中,也就是这些配置是服务于整个图表的,比如 标题、图例、工具栏、数据提示框、区域缩放等,每种配置项,都是一个 BasicOpts 的子类,通过图标对象的 set_global_opts 方法设置,例如:

from pyecharts.charts import Bar

bar = Bar()
bar.set_global_opts(
    title_opts=opts.TitleOpts(
        title="Bar-基本示例",
        subtitle="我是副标题",
        pos_left= "center",
        pos_top="top"),
    legend_opts=opts.LegendOpts(
        pos_top="60"
))

系列配置

系列(series)是很常见的名词。在 echarts 里,系列(series)是指:一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”,而在 echarts 中取其扩展的概念,不仅表示数据,也表示数据映射成为的图。所以,一个 系列 包含的要素至少有:一组数值、图表类型(series.type)、以及其他的关于这些数据如何映射成图的参数。

pyecharts 系列配置 和 全局配置 类似,用于对图表中 系列 进行设置,比如设置 系列 样式、坐标系、颜色、形状、特殊点,以及等。

例如,柱状图上不显示标签:

from pyecharts.charts import Bar

bar = Bar()
bar.set_series_opts(label_opts=opts.LabelOpts(is_show=False))

pyecharts 安装

首先安装 pyecharts:

pip install pyecharts

安装完后,在 Python 交互式环境( REPL )中,可以查看版本信息:

>>> import pyecharts
>>> print(pyecharts.__version__)
1.7.0

Flask 集成

前面我们了解了 Flask 的开发,对于一个应用来说,需要有 视图函数 , 模板、和 路由,echarts 是一个前台框架,只要将页面做成模板,然后将数据写入模板就好,这样确实是可以做的,不过 pyecharts 已经处理了大部分工作,只要在 Python 中开发代码就好了。

pyecharts 和 Flask 集成,四种形式,分别是 模板渲染、前后分离、定时全集更新 和 增量数据更新

模板渲染

模板渲染是比较方便的,可以不用写前台页面,因为 pyecharts 已经定义了很多模板,以及模板宏,调用很方便。

第一步 下载 pyecharts 的模板

可以从 Github 的 pyecharts 项目中获取,
https://github.com/pyecharts/pyecharts

如果用 pip 安装的 pyecharts ,可以在安装环境中的模块目录下找到,即 Python home 中的
Lib/site-packages/pyecharts/render/templates

第二步 将模板放入项目目录下

在我们的 Flask 应用的目录的 templates 模板下,创建 pyecharts 目录,来存放复制的 pyecharts 模板。

这样可以避免与 Flask 应用中我们自建的模板混淆。

第三步 渲染图表

我们将业务逻辑写入都写在 Flask 启动脚本 App.py 中:

from flask import Flask  # 引入 Flask
from jinja2 import Markup, Environment, FileSystemLoader
from pyecharts.globals import CurrentConfig

CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./templates/pyecharts"))

from pyecharts import options as opts
from pyecharts.charts import Bar

app = Flask(__name__)

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())
  • 首先引入 Flask、jinjia2 和 pyecharts
  • 为全局变量设置 jinjia2 环境,指定模板路径为 /templates/pyecharts 即我们存放 pyecharts 模板的路径。这样不会影响 Flask 的默认模板路径
  • 定义图表工厂方法,返回一个图表实例,图表实例支持点串联操作
  • add_xaxis 添加 X 轴显示的项目
  • add_yaxis 添加 Y 轴数据分类和数值,相当于分组,可以添加多个
  • set_global_opts 设置图标的全局配置
  • 视图函数中,用图表工厂方法 bar_base 创建一个图表实体,返回 render_embed 经过 jinjia2 的渲染结果
  • render_embed 返回的是合成好的 html 可以直接返回给前台做展示

前后分离

模板渲染虽然方便,但是不透灵活,比如要修改已有页面,加上一个图表,这是可以考虑用前后分离的方式

前两步和 模板渲染 中的一样

第三步 创建前台页面

创建一个 html 文件 index.html,存放在 templates 文件夹下,内容和 echarts 一样,主要是需要引用 echarts 框架,和 jQuery 框架(其他的Ajax框架均可),定义显示图表的 Dom,最后在页面加载完成回调方法中,通过 ajax 请求后台数据,异步将获取到的图标数据设置到图表中:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的图表</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/JAVAscript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
        $(
            function () {
                var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "/barChart",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result);
                    }
                });
            }
        )
    </script>
</body>
</html>

第四步 编写后台相应方法

前台页面中定义了 ajax 请求路径是 barChart,我们就写一个处理该请求的视图方法:

@app.route("/barChart")
def bar_chart():
    c = bar_base()
    return c.dump_options_with_quotes()
  • 定义图表的方式和 模板渲染一样
  • 视图方法中,用工厂方法创建视图对象,返回 dump_options_with_quotes 的结果
  • dump_options_with_quotes 将图标的配置集成为前台需要的格式,返回 JSON 数据

最后启动 Flask 应用,在 <localhost:5000> 就能看到效果

前后分离的方式更常用,可以让前台的展示发挥最大的优势,Flask 后台提供图表需要的数据和设置

定时全量更新

有很多场景需要实时更新图表内容,实现方式是将 前后分离 的方式,获取后台图标配置的请求写成定时调用的,将得到的图标数据通过 setOption 设置到图表对象中。

后台视图方法每次重新根据查询条件,获取新的数据,设置到图表对象中,再用 dump_options_with_quotes 将设置导出,返回给前台

定时增量更新

增量更新在数据监控的场景中很常用,实现方式和全量更新有些差别

首先需要得到一个图表的设置,这个和全量更新一样

然后将获取增量数据的方法作为定时的,在回调函数中,为图标设置增量数据,与全量更新不同的是只更新 系列数据,echarts 会处理好图表的变化,包括动画效果

前台获取增量数据并更新的方法:

function getDynamicData() {
    $.ajax({
        type: "GET",
        url: "/lineDynamicData",
        dataType: "json",
        success: function (result) {
            old_data.push([result.name, result.value]);
            chart.setOption({
                series: [{data: old_data}]
            });
        }
    });
}

old_data 图表数据的应用:

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

如果需要同时将最早的数据清除掉,只需要将需要去除的数据从 old_data 中删除就行:

old_data.shift();  // 清楚最早的一个数据

后台数据处理

根据图表数据要求,每次前台请求增量数据时,将最新的数据返回

这里需要注意到是增量数据范围,即怎么确定增量数据

常用数据产生时间 或者 数据 id 作为增量条件,例如图表展示的是在线用户数变化曲线,在线用户数,会定时存放在库表中,每条记录都有个 id,每次请求增量数据时,将已经获取到数据的最大的 id 值作为请求参数,后台就可以获取该主键值后面的数据,作为增量数据。

渲染图片

在有些场景下,需要生成图表图片,Python 有很多图表处理工具,可以做图像生成。

对 echarts 来说,也有生成图片的功能,不过需要在浏览器中,pyecharts 作为 Python 和 echarts 的桥梁,支持后端生成图表图片。

pyecharts 提供了 selenium, phantomjs 和 pyppeteer 三种方式渲染图片,其原理是用无头浏览器,渲染图表页面后,用 echarts 生成图片功能,生成图片。

这里我们用 selenium 做演示

安装 snapshot-selenium

snapshot-selenium 是 pyecharts + selenium 渲染图片的扩展,selenium 需要配置 browser driver,推荐使用 Chrome 浏览器,可以开启 headless 模式,具体配置可参考 selenium-python 相关介绍。

使用

pyecharts 使用 make_snapshot 直接生成图片,支持生成图片相关的配置,如 echarts html 文件名,输出文件名,浏览器种类等:

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.render import make_snapshot

from snapshot_selenium import snapshot

def bar_chart() -> Bar:
    c = (
        Bar()
        .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
        .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
        .reversal_axis()
        .set_series_opts(label_opts=opts.LabelOpts(position="right"))
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-测试渲染图片"))
    )
    return c

make_snapshot(snapshot, bar_chart().render(), "bar0.png")
  • 先引入 make_snapshot 和 snapshot
  • 定义图表工厂方法
  • 调用 make_snapshot 导出图片,第一个参数是渲染扩展工具,第二个是生成的 Html 文件路径,第三个参数是生成的图片文件路径
  • 由于是通过无头浏览器中模拟的,图表复杂或者数据多时,渲染可能较慢,可以通过 make_snapshot 命名参数 delay 来设置等待时间,默认为 2 秒

总结

今天介绍了使用 pyecharts 实现数据可视化的方法,并描述了如何与 Flask 集成,以及几种生成图表的方式,可以尝试一下,以便做出更好玩更有用的 Flask 应用。



Tags:数据可视化   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
数据可视化在网络安全中的关键作用
在当今数字化时代,网络安全已成为各大企业乃至国家安全的重要组成部分。随着网络攻击的日益复杂和隐蔽,传统的网络安全防护措施已难以满足需求,急需新型的解决方案以增强网络防...【详细内容】
2024-03-29  Search: 数据可视化  点击:(22)  评论:(0)  加入收藏
八个常见的数据可视化错误以及如何避免它们
在当今以数据驱动为主导的世界里,清晰且具有洞察力的数据可视化至关重要。然而,在创建数据可视化时很容易犯错误,这可能导致对数据的错误解读。本文将探讨一些常见的糟糕数据可...【详细内容】
2024-03-26  Search: 数据可视化  点击:(11)  评论:(0)  加入收藏
Rust中的数据可视化指南
可视化是数据分析和解释的一个关键方面。虽然Rust主要以其性能和安全特性而闻名,但它也为数据可视化提供了强大的工具。在这个全面的指南中,我们将深入研究Rust中的数据可视化...【详细内容】
2024-03-07  Search: 数据可视化  点击:(35)  评论:(0)  加入收藏
构建Flask 数据可视化大屏
引言数据可视化是现代应用开发中不可或缺的一环,而使用 Flask 构建数据可视化大屏是一个既有趣又具有挑战性的项目。在这篇文章中,我们将深入介绍如何借助 Flask 后端和纯 HTM...【详细内容】
2023-12-27  Search: 数据可视化  点击:(87)  评论:(0)  加入收藏
基于Python实现大规模光栅人口数据可视化
译者 | 朱先忠审校 | 重楼我经常看到网上流传着美丽的人口地图;然而,我也常常会遇到一些技术问题,比如可视化本文中显示的其他的地图片段,或者将大规模光栅数据转换为更便于计算...【详细内容】
2023-12-14  Search: 数据可视化  点击:(280)  评论:(0)  加入收藏
埋点数据可视化的探索与实践
如何进行埋点数据的分析?埋点是数据采集的专用术语,在数据驱动型业务中,如营销策略、产品迭代、业务分析、用户画像等,都依赖于数据提供决策支持,希望通过数据来捕捉特定的用户行...【详细内容】
2023-11-30  Search: 数据可视化  点击:(62)  评论:(0)  加入收藏
Python数据可视化:使用pyecharts创建交互式图表
数据可视化是数据分析和呈现的重要组成部分。通过可视化,数据可以更容易地被理解和解释。Python中有许多强大的数据可视化工具,其中之一是pyecharts,它是一个基于Echarts库的Py...【详细内容】
2023-10-28  Search: 数据可视化  点击:(143)  评论:(0)  加入收藏
Python数据可视化与图表绘制:让数据一目了然
Python 提供了多种数据可视化库,使得数据的可视化和图表绘制变得非常简单和灵活。下面将介绍一些常用的 Python 数据可视化库,并分享如何使用它们来创建各种类型的图表。一、M...【详细内容】
2023-10-07  Search: 数据可视化  点击:(339)  评论:(0)  加入收藏
你是否知道如何使用Python Matplotlib创建令人惊叹的数据可视化?
Python Matplotlib 的使用Python Matplotlib 是一个基于 Python 的 2D 绘图库,能够生成各种静态、动态、交互式的图表,支持多种输出格式,包括图片、PDF、SVG 等。Matplotlib 提...【详细内容】
2023-08-31  Search: 数据可视化  点击:(239)  评论:(0)  加入收藏
Tableau Desktop 2021数据可视化工具
软件特点一、快速获得可行的见解将图表构建者抛在后面。实时视觉分析推动了无限的数据探索。交互式仪表板可帮助您即时发现隐藏的见解。Tableau利用人们的自然能力快速发现...【详细内容】
2023-08-31  Search: 数据可视化  点击:(255)  评论:(0)  加入收藏
▌简易百科推荐
大数据杀熟何时告别“人人喊打却无可奈何”?
2月7日郑州飞往珠海的航班,不同手机、不同账号搜索该航班显示出不同价格。图源网络有网友近日分享在某平台的购票经历,引发社会广泛关注&mdash;&mdash;用3个账号买同一航班同...【详细内容】
2024-01-30    中国青年网  Tags:大数据杀熟   点击:(34)  评论:(0)  加入收藏
简易百科:到底什么是大数据?
随着互联网的快速发展,大数据已经成为了当今社会最热门的话题之一。那么,到底什么是大数据呢?首先,我们需要明确大数据的定义。大数据是指数据量极大、类型繁多、处理难度高的数...【详细内容】
2024-01-30    简易百科  Tags:大数据   点击:(41)  评论:(0)  加入收藏
数据采集新篇章:AI与大模型的融合应用
开篇在AIGC(人工智能与通用计算)应用中,大型语言模型(LLM)占据着举足轻重的地位。这些模型,如GPT和BERT系列,通过处理和分析庞大的数据集,已经极大地推动了自然语言理解和生成的边界...【详细内容】
2024-01-17  崔皓  51CTO  Tags:数据采集   点击:(57)  评论:(0)  加入收藏
挑战 Spark 和 Flink?大数据技术栈的突围和战争
十年的轮回,正如大数据的发展一般,它既是一个轮回的结束,也是崭新的起点。大数据在过去的二十年中蓬勃发展,从无到有,崛起为最具爆炸性的技术领域之一,逐渐演变成为每个企业不可或...【详细内容】
2024-01-17  InfoQ    Tags:大数据   点击:(41)  评论:(0)  加入收藏
分布式存储系统在大数据处理中扮演着怎样的角色?
如果存储节点本身可以定制,则通常会让其支持部分计算能力,以利用数据的亲和性,将部分计算下推到相关的存储节点上。如果存储是云上的 S3 等对象存储,无法定制,则通常会将数据在计...【详细内容】
2023-12-19  木鸟杂记  微信公众号  Tags:大数据   点击:(49)  评论:(0)  加入收藏
大数据如何实时拯救生命:车联网的数据分析有助预防交通事故
译者 | 李睿审校 | 重楼车联网(IoV)是汽车行业与物联网相结合的产物。预计车联网数据规模将越来越大,尤其是当电动汽车成为汽车市场新的增长引擎。问题是:用户的数据平台准备...【详细内容】
2023-12-19    51CTO  Tags:大数据   点击:(43)  评论:(0)  加入收藏
利用生成对抗网络进行匿名化数据处理
在互联网时代,数据日益成为人们的生产资料。然而,在某些情况下,我们需要分享数据,但又需要保护个人隐私。这时,匿名化技术就显得尤为重要。本文将介绍利用生成对抗网络进行匿名化...【详细内容】
2023-12-18  技巧达人小影    Tags:数据处理   点击:(57)  评论:(0)  加入收藏
盘点那些常见的数据中心类型,你知道几个?
在数字化潮流的浪潮下,数据中心如同企业的神经系统,关系到业务的稳健运转。而在这个巨大的网络中,各种数据中心类型如雨后春笋般崭露头角。从企业级的个性至云数据中心的虚拟化...【详细内容】
2023-12-07  数据中心之家  微信公众号  Tags:数据中心   点击:(71)  评论:(0)  加入收藏
数据中心的七个关键特征
随着信息技术的不断演进,数据中心的可靠性、可扩展性、高效性、安全性、灵活性、管理性和可持续性成为业界探讨的焦点。下面让我们一同深入剖析这些关键特征,了解它们是如何影...【详细内容】
2023-12-06  数据中心之家  微信公众号  Tags:数据   点击:(65)  评论:(0)  加入收藏
什么是数据解析?将数据转化为更好的决策
什么是数据解析?数据解析是一门专注于从数据中获取洞察力的学科。它包含数据分析(data analysis)和管理的流程、工具和技术,包括数据的收集、组织和存储。数据解析的主要目的是...【详细内容】
2023-12-06  计算机世界    Tags:数据解析   点击:(68)  评论:(0)  加入收藏
站内最新
站内热门
站内头条