編程學習網 > 編程語言 > Python > python flask框架實現數據可視化?。╢lask框架數據可視化)
2022
12-27

python flask框架實現數據可視化?。╢lask框架數據可視化)

今天編程學習網為大家講解python flask框架實現數據可視化,有需要的小伙伴可以參考一下:

數據可視化是數據處理中的重要部分,前面我們了解了 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 秒

以上就是“python flask框架實現數據可視化”的詳細內容,想要了解更多Python教程歡迎持續關注編程學習網

掃碼二維碼 獲取免費視頻學習資料

Python編程學習

查 看2022高級編程視頻教程免費獲取