50行Python代码绘制数据大屏，这个可视化框架真的太神了

　　作者：俊欣
　　来源：关于数据分析与可视化
　　今天小编来为大家安利另外一个用于绘制可视化图表的Python框架，名叫Dash，建立在Flask、Plotly。js以及React。js的基础之上，在创建之出的目的是为了帮助前端知识匮乏的数据分析人员，以纯Python编程的方式快速制作出交互特性强的数据可视化大屏，在经过多年的迭代发展，如今不仅仅可以用来开发在线数据可视化作品，即便是轻量级的数据仪表盘、BI应用甚至是博客或者是常规的网站都随处可见Dash框架的影子，今天小编就先来介绍一下该框架的一些基础知识，并且来制作一个简单的数据可视化大屏。
　　Dash框架中的两个基本概念
　　我们先来了解一下Dash框架中的两个基本概念LayoutCallbacks
　　Layout顾名思义就是用来设计可视化大屏的外观和布局，添加一些例如下拉框、单选框、复选框、输入框、文本框、滑动条等组件，其中Dash框架对HTML标签也进行了进一步的封装，使得我们直接可以通过Python代码来生成和设计每一个网页所需要的元素，例如h1HelloWorld！！h1pDashconvertsPythonclassesintoHTML
　　我们转化成Dash的Python结构就是html。Div（〔html。H1（HelloDash），html。Div（〔html。P（DashconvertsPythonclassesintoHTML），〕）〕）
　　Callbacks也就是回调函数，基本上是以装饰器的形式来体现的，实现前后端异步通信的交互，例如我们在点击按钮或者下拉框之后出现的功能就是通过回调函数来实现的。安装和导入模块
　　在导入模块之前，我们先用pip命令来进行安装，！pipinstalldash！pipinstalldashhtmlcomponents！pipinstalldashcorecomponents！pipinstallplotly
　　然后我们导入这些刚刚安装完的模块，其中dashhtmlcomponents用来生成HTML标签，dashcorecomponents模块用来生成例如下拉框、输入框等组件，这里我们还需要用到plotly模块，因为我们需要用到的数据来自该模块，里面是一众互联网公司过去一段时间中股价的走势importdashimportdashhtmlcomponentsashtmlimportdashcorecomponentsasdccimportplotly。graphobjectsasgoimportplotly。expressaspx读取数据并且绘制折线图
　　那么我们读取数据并且用plotly来绘制折线图，代码如下appdash。Dash（）实例化Dashdfpx。data。stocks（）读取股票数据defstockprices（）：绘制折线图figgo。Figure（〔go。Scatter（xdf〔date〕，ydf〔AAPL〕，linedict（colorfirebrick，width4），nameApple）〕）fig。updatelayout（title股价随着时间的变幻，xaxistitle日期，yaxistitle价格）returnfigapp。layouthtml。Div（idparent，children〔html。H1（idH1，childrenDash案例一，style｛textAlign：center，marginTop：40，marginBottom：40｝），dcc。Graph（idlineplot，figurestockprices（））〕）ifnamemain：app。runserver（）
　　我们点击运行之后会按照提示将url复制到浏览器当中便可以看到出来的结果了，如下所示
　　从代码的逻辑上来看，我们通过Dash框架中的Div方法来进行页面的布局，其中有参数id来指定网页中的元素，以及style参数来进行样式的设计，最后我们将会指出来的图表放在dcc。Graph（）函数当中。添置一个下拉框
　　然后我们再添置一个下拉框，当我们点击这个下拉框的时候，可是根据我们的选择展示不同公司的股价，代码如下dcc。Dropdown（iddropdown，options〔｛label：谷歌，value：GOOG｝，｛label：苹果，value：AAPL｝，｛label：亚马逊，value：AMZN｝，〕，valueGOOG），
　　output
　　options参数中的label对应的是下拉框中的各个标签，而value对应的是DataFrame当中的列名df。head（）
　　output
　　添加回调函数
　　最后我们将下拉框和绘制折线图的函数给连接起来，我们点击下拉框选中不同的选项的时候，折线图也会相应的产生变化，app。callback（Output（componentidbarplot，componentpropertyfigure），〔Input（componentiddropdown，componentpropertyvalue）〕）defgraphupdate（dropdownvalue）：print（dropdownvalue）FunctionforcreatinglinechartshowingGooglestockpricesovertimefiggo。Figure（〔go。Scatter（xdf〔date〕，ydf〔｛｝。format（dropdownvalue）〕，linedict（colorfirebrick，width4））〕）fig。updatelayout（title股价随着时间的变幻，xaxistitle日期，yaxistitle价格）returnfig
　　我们看到callback（）方法中指定输入和输出的媒介，其中Input参数，里面的componentid对应的是下拉框的id也就是dropdown，而Output参数，当中的componentid对应的是折线图的id也就是barplot，我们来看一下最后出来的结果如下
　　最后，全部的代码如下所示importdashimportdashhtmlcomponentsashtmlimportdashcorecomponentsasdccimportplotly。graphobjectsasgoimportplotly。expressaspxfromdash。dependenciesimportInput，Outputappdash。Dash（）dfpx。data。stocks（）app。layouthtml。Div（idparent，children〔html。H1（idH1，childrenDash案例一，style｛textAlign：center，marginTop：40，marginBottom：40｝），dcc。Dropdown（iddropdown，options〔｛label：谷歌，value：GOOG｝，｛label：苹果，value：AAPL｝，｛label：亚马逊，value：AMZN｝，〕，valueGOOG），dcc。Graph（idbarplot），〕）app。callback（Output（componentidbarplot，componentpropertyfigure），〔Input（componentiddropdown，componentpropertyvalue）〕）defgraphupdate（dropdownvalue）：print（dropdownvalue）figgo。Figure（〔go。Scatter（xdf〔date〕，ydf〔｛｝。format（dropdownvalue）〕，linedict（colorfirebrick，width4））〕）fig。updatelayout（title股价随着时间的变幻，xaxistitle日期，yaxistitle价格）returnfigifnamemain：app。runserver（）