🥑Plotly和Flask网页可视化

Python | Plotly | Flask | 可视化

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

一个简单的Dash应用

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

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

最后一部分为应用程序创建布局。 创建布局基本上是将网页定义为Python中的文档对象模型。 定义的页面由标题“ Hello Dash”和一些文本“ Dash：Python的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参数的占位符。

看起来是这样的：

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

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

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

本文代码

🏈page指点迷津 | Brief