Plotly:如何重写标准仪表板应用程序以在 JupyterLab 中启动它?

问题描述

您可以在 plotly 文档中找到一堆 Dash 示例，并且大多数示例都以关于如何使用 Dash 构建图形的说明结尾:

<块引用>

达世币呢?Dash 是一个用于构建的开源框架分析应用程序，无需 Javascript，它是与 Plotly 图形库紧密集成.

在

但您也可以使用 mode='external' 来启动 Dash 它自己的标签:

您可以设置 mode='external' 在默认浏览器中启动它.

包含更改的完整代码:'

导入 plotly.graph_objects将 plotly.express 导入为 px# 导入破折号从 jupyter_dash 导入 JupyterDash将 dash_core_components 导入为 dcc将 dash_html_components 导入为 html# 数据和绘图图df = px.data.gapminder().query("country=='Canada'")fig = px.line(df, x="year", y="lifeExp", title='加拿大的预期寿命')# 设置 Dash 应用程序# app = dash.Dash()应用程序 = JupyterDash(__name__)app.layout = html.Div([dcc.Graph(图=图)])# 启动 Dash 应用程序# app.run_server(debug=True,# use_reloader=False # 如果在 Jupyter 内部，则关闭重新加载器# )app.run_server(mode='inline', 端口 = 8070, dev_tools_ui=True,dev_tools_hot_reload =真，线程=真)

You can find a bunch of Dash examples in the plotly docs, and most examples end with a note on how to build figures using Dash:

What About Dash? Dash is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.

Learn about how to install Dash at https://dash.plot.ly/installation.

But I'd like to fire them up in JupyterLab instead. So what changes would I have to make in the following 'normal' Dash app to make it run in JupyterLab?

Code sample:

import plotly.graph_objects as go
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html

# data and plotly figure
df = px.data.gapminder().query("country=='Canada'")
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')

# Set up Dash app
app = dash.Dash()
app.layout = html.Div([
    dcc.Graph(figure=fig)
])

# Launch Dash app
app.run_server(debug=True,
               use_reloader=False # Turn off reloader if inside Jupyter
              ) 

解决方案

Any working Dash app can be launched from JupyterLab with the setup described in the question by specifying use_reloader=False in:

app.run_server(debug=True,
           use_reloader=False # Turn off reloader if inside Jupyter
          ) 

But if you'd like to use JupyterLab and select between launching the app in your default browser, inline in a cell or directly in Jupyter in its own tab, just follow these simple steps:

Change the following lines

# 1
import dash

# 2
app = dash.Dash()

# 3
app.run_server(debug=True,
           use_reloader=False # Turn off reloader if inside Jupyter
          )  

To this:

# 1
from jupyter_dash import JupyterDash

# 2
app = JupyterDash(__name__)

# 3
app.run_server(mode='inline', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)

This will launch Dash inline directly in JupyterLab:

But you can also go for mode='external' to launch Dash it its own tab:

And you can set mode='external' to launch it in your default browser.

Complete code with changes:'

import plotly.graph_objects as go
import plotly.express as px
# import dash 
from jupyter_dash import JupyterDash

import dash_core_components as dcc
import dash_html_components as html

# data and plotly figure
df = px.data.gapminder().query("country=='Canada'")
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')

# Set up Dash app
# app = dash.Dash()

app = JupyterDash(__name__)

app.layout = html.Div([
    dcc.Graph(figure=fig)
])

# Launch Dash app
# app.run_server(debug=True,
#                use_reloader=False # Turn off reloader if inside Jupyter
#               )

app.run_server(mode='inline', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)