内容已经转出,请移步以下网址:

https://viadean.notion.site

Plotly和Flask网页可视化

 二维码 92
文章附图

我们将看到用Flask构建一个多页的Web应用程序有多简单,该应用程序包含Plotly图表(对于Dash的开源版本而言,这并不是一件容易的事)。

一个简单的Dash应用

以下是Dash教程的略微修改版本的列表-原始教程在这里,您可以从此链接下载源代码。

它有很多部分。首先,我们导入适当的库,然后在下一行,启动Dash应用程序。接下来,我们定义一个Pandas数据框,然后绘制一个条形图,将其放入变量fig中。

最后一部分为应用程序创建布局。 创建布局基本上是将网页定义为Python中的文档对象模型。 定义的页面由标题“ Hello Dash”和一些文本“ Dash:Python的Web应用程序框架”组成。 最后是图形。

跟踪并非难事,它会产生一个如下所示的网页:

使用Dash的单页Web应用

现在让我们看一下Flask的等效物。

一个简单的Flask + Plotly应用程序

使用Plotly的Flask应用略有不同。 首先,有两个部分:Flask应用程序本身和一个或多个HTML模板。 Flask应用程序执行与Dash应用程序类似的工作,但没有构建实际的网页。 该网页是一个HTML模板,我们从Flask应用程序将Plotly数据传递给它,以便它可以显示图表。

Flask部分的结构与Dash相似:首先(略有不同)导入,然后是Flask应用,但现在有所不同。代码的下一部分在一个名为notdash()的函数定义中,并且具有app.route装饰器。

在Flask中,URL被映射到函数上,装饰器告诉我们哪个函数对应于特定的URL或路由。 在我们的例子中,我们有一个名为notdash()的函数,该函数被称为url"/"调用。我们很快就会看到,使用Flask,我们可以指定其他具有不同网址的页面。

在notdash()中,我们创建数据框,并像以前的版本一样,在变量fig中创建一个绘图。 现在,我们进行一些更改。 我们的下一步是使用json.dumps()和Plotly随附的JSON编码器将图转换为JSON。 这样做的原因是网页将使用Plotly Javascript库来呈现图,这需要将Plotly图表编码为JSON。

下一行代码告诉Flask使用名为notdash.html的HTML模板并将JSON代码传递给它。

模板是将要显示的网页。 它与Dash应用程序中的布局等效,但是我们在HTML文件中编写了实际的HTML:HTML的正文包含一个标题(显示一条消息)和一个<div>元素,该元素将包含Plotly图表(对于Plotly 为了工作,我们需要给这个<div>一个id并将其class属性设置为chart。

文件的其余部分是所有Flask / Plotly应用程序都通用的几行Javascript样板代码。 首先,我们导入Plotly Javascript库。 然后,我们创建自己的脚本,该脚本将变量设置为导入的JSON代码,然后从Plotly库中调用plot方法以显示图表。

请注意,我们告诉Python将JSON数据放入HTML的方式是使用符号{{name}},其中name是从Python传递到模板的参数,花括号表示它是a参数的占位符。

看起来是这样的:

与Dash版本非常相似,对吧?

我必须承认我的非Dash版本略长一些,但是,从我的角度来看,将您的网页编写为HTML文件和使用Python编写的网络应用程序更合乎逻辑。

更重要的是,它使您可以灵活地编写多页应用程序。

多页app

在本节中,我们将制作一个包含三个页面的应用程序:两个页面包含不同的图表,另一个索引页面包含指向其他两个页面的链接。 当您在单个网站上包含许多不同的图表或仪表板时,通常可能会想这样做,但在使用Dash时却不那么简单。

下图显示了该应用程序的三个页面。

它比上一个页面稍微复杂一点,因为图表页面(notdash2.html)现在具有三个参数,即图表(与以前一样)以及标题和描述-HTML代码中的占位符为{{graphJSON}},{ {header}}和{{description}}。

现在,Flask代码为这三个页面提供了三种路由。 第一个是Web应用程序的根目录,另外两个是两个图表页面的根目录。 注意,图表具有相同的模板,因为它们使用相同的布局,但是将不同的标题,描述和图表传递给这些模板。

因此,我认为这不是一个多页的Web应用程序,它使用Plotly在Flask应用程序中显示来自Pandas数据框的图表。

本文代码


阅读完整文档