用Python Flask, Plotly和AdminLTE创建仪表盘

当我第一次学习Flask来创建功能性仪表板（Dashboard）时，很难找到真正符合我需要的教程或文档。它们要么太简单了，没有足够的参考价值，要么太复杂，包含了很多我不需要的功能。因此，为了理解本文，我希望您已经掌握了Flask、HTML&CSS、Bootstrap的基本知识，并且能够方便地使用python绘图库。

也许有人会问我为什么不选择更熟悉的python库，比如Matplotlib和Seaborn进行绘图。答案是，如果我想在web仪表板上使用这些库，使用它们并不方便。据我所知，使用这些库，我必须将绘图转换为某种图像类型的文件（jpg、svg或png），然后在HTML文件中再次调用它，此外图片是静态而不是交互的。

本文来自《数据黑客》，登录官网可阅读更多精彩资讯和文章。

对于Altair和Plotly，我只需要将图表转储到JSON中，然后将其解析到HTML文件。如果您不熟悉Altair（Plotly非常类似于Seaborn或Matplotlib），这里有一个很好的演示库。

为什么要使用Chart.js？即便你不懂Javascript，也可以很简单的使用它。此外，通过使用所有这些绘图库，我希望涵盖命令式可视化（Matplotlib、Seaborn、Plotly等）、声明性可视化（Altair）和Javascript的基本web可视化(Chart.js).

我把创建仪表板的过程划分为5个阶段：

• 考虑仪表盘的外观（UI）
• 项目结构
• 数据和见解
• 可视化
• 综合所有内容

＃1. 考虑一下外观

这是最简单的部分。为简单起见，您可以选择基本的Bootstrap导航栏及其布局网格，可以在此处找到需要的内容。

但是，如果您希望将AdminLTE（如下）用作前端样板，可以在此处免费下载。在本文中我将使用AdminLTE，创建一个“不太简单”的仪表板。

下载AdminLTE模板后，也许其中有些人不知所措，因为其中包含这么多的文件夹和文件。正如我之前所说，我将删除其大部分功能并从头开始。在本文中，我仅将starter.html文件用作父布局以及所有支持它的文件。

1.1 清理AdminLTE模板

打开AdminLTE文件夹，我们将看到一堆文件和文件夹，如上图所示。使用文本编辑器打开启动程序文件（starter.html），然后您会发现这种HTML脚本：

href =“plugins/fontawesome-free/css/all.min.css”表示starter.html文件需要all.min.css中的内容，而该内容在plugins/fontawesome-free/css中具有相对路径，因此我们需要保留此文件及其文件夹路径。带有类似网站链接的href（例如：“https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700”），表明我们需要此链接提供的内容，因此我们不需要太在意，只需删除它即可。然后，如果继续滚动到脚本底部，我们将找到其他路径。保留所有这些文件和路径，然后删除所有其他文件和文件夹。最后，我们仅包含小部分文件：

我用于本文的AdminLTE文件和