Plotly Dash URL路由到当前页面中的id
Plotly Dash是一个用于构建交互式数据可视化应用程序的Python框架。它基于Flask和React构建，可以通过URL路由来导航到不同的页面和组件。
URL路由是指根据URL的路径来确定要显示的内容或执行的操作。在Plotly Dash中，可以使用回调函数和URL路由来实现页面之间的导航和交互。
要将URL路由到当前页面中的id，可以使用Dash的dcc.Location组件和dcc.Link组件。
首先，在Dash应用程序中引入dcc.Location和dcc.Link组件：
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
然后，定义回调函数来根据URL路由显示不同的内容：
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/':
return html.Div([
html.H1('首页'),
# 在这里添加首页的内容
])
elif pathname == '/page1':
return html.Div([
html.H1('页面1'),
# 在这里添加页面1的内容
])
elif pathname == '/page2':
return html.Div([
html.H1('页面2'),
# 在这里添加页面2的内容
])
else:
return '404 页面未找到'
最后，在布局中使用dcc.Link组件来创建导航链接：
html.Div([
dcc.Link('首页', href='/'),
dcc.Link('页面1', href='/page1'),
dcc.Link('页面2', href='/page2')
])这样，当用户点击导航链接时，URL会发生变化并触发回调函数，根据URL路由显示相应的页面内容。
Plotly Dash的优势在于其简单易用的API和丰富的可视化组件库，可以快速构建交互式的数据可视化应用程序。它适用于各种场景，包括数据分析、数据报告、仪表盘、数据监控等。
推荐的腾讯云相关产品：腾讯云服务器（https://cloud.tencent.com/product/cvm）和腾讯云容器服务（https://cloud.tencent.com/product/tke），它们提供了稳定可靠的云计算基础设施和容器化部署环境，可以支持Plotly Dash应用程序的部署和运行。
相关·内容
1回答
如何在Dash中对同一URL路径进行多个导航
python、python-3.x、plotly-dash
我正在尝试为同一个URL路径添加多个导航。 我的代码.. import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_table
app = dash.Dash()
index_layout = html.Div([
# represents the URL bar, doesn't render anything
dcc.Location(id='
浏览 17提问于2021-01-28得票数 1
回答已采纳
1回答
与Dash应用程序集成的烧瓶-路由/ 404未找到错误
python、flask、plotly-dash、flask-login、werkzeug
我正在使用烧瓶的登录模块与我的破折号应用程序，需要集成在水瓶环境中的破折号应用程序。我正在使用酒瓶进行认证，并增加了一个导航菜单，链接到破折号应用程序。
这是我的文件结构：
auth
- login
- server
- init.py
templates
- base.html
pages
- home.py
- page2.py
index.py app.py
app.py含量
import dash
import flask
app = dash.Dash(__name__,
external_stylesheets=external
浏览 1提问于2021-06-12得票数 0
2回答
如何在多页应用程序上下载带有花式破折号的文件？
python、flask、plotly-dash
我已经知道了以下方法(链接)：
server = Flask(__name__)
app = dash.Dash(server=server)
@server.route("/download/<path:path>")
def download(path):
"""Serve a file from the upload directory."""
return send_from_directory(UPLOAD_DIRECTORY, path, as_attachment=True)
但问题是
浏览 1提问于2020-04-09得票数 2
回答已采纳
2回答
python绘图虚线导航
python、plotly、plotly-dash
我的dash应用程序具有基于可用dash文档中找到的配方的导航。它起作用了，但看起来不太好。谁知道更好的引入菜单的方法？我不想开发一个特殊的meteor组件，但我很乐意使用当前可用的框架之一(bootstrap、semantics等)。
import dash,copy
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
server = app.se
浏览 0提问于2018-07-11得票数 1
1回答
是否有用户控制的方式来刷新Dash应用程序中的数据？
flask、plotly-dash、plotly-python
我有一个Dash应用程序，它根据从API绘制的数据制作一些图形，我想给用户一个选项来更改参数，在此基础上提取新数据，然后重新绘制图形。它可以通过一个表单，但我认为最简单的方法是使用Flask的<pathname>路由系统。Dash允许我这样做： import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
app = dash.Dash(__name__)
app.layout = html.Div(children=[
浏览 7提问于2020-04-22得票数 1
1回答
如何使用Python创建多个页面的仪表板
python、plotly-dash、dashboard
我有一个4页的仪表板，并以非常基本的方式为每个页面创建了不同的内容，并以dbc.navbar为例。
但是我现在尝试的是为每一页有一个不同的图表布局。我知道它是建立在列和行之上的，但我无法理解它。
这是我的仪表板代码
import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output #for the callbacks
app = dash.Dash(external_stylesh
浏览 9提问于2021-12-06得票数 0
1回答
Dash客户端JS在页面返回时不执行
javascript、python、plotly-dash
我有一个破折号应用程序，我添加了一个JS代码到print.window按钮上。该代码在多页应用程序的每一页上运行良好，当多次在页面上打印时，但一旦我迁移回以前按下按钮的页面，它就无法工作。这会不会是JS不执行的问题？还是别的什么？代码应该执行‘点击’，而不是在n_clicks计数，所以什么都不需要重置为零。谢谢。
from dash import Dash, dcc, html, Input, Output, callback
import dash_bootstrap_components as dbc
app = Dash(__name__, suppress_callback_exce
浏览 1提问于2022-03-05得票数 0
回答已采纳
2回答
多页Dash应用回调未注册
python、flask、plotly-dash
我正在开发我的第一个Dash应用程序(我在Django方面有经验，在Flask方面几乎没有经验，我知道Dash就是基于它构建的)，但我在路由和注册新页面的回调方面遇到了问题。我已经阅读了一些关于这个主题的文章，比如：
目前我有我的主app.py：
from app1 import build as app1
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server
app.config.suppress_callback_exceptions = True
body
浏览 0提问于2020-01-25得票数 5
1回答
如何在多页应用程序中存储输入数据？
python、plotly-dash
我希望有人能在我目前面临的问题上帮助我。我正在构建一个3页的破折号应用程序，我很难使用dcc.store组件。
在第一页上有一个输入字段，用户可以在其中输入他们的名字。我想把它的名字存储在第2页，这样我就可以在第2页上使用它了。但是由于某些原因，我没有按照我想要的方式使用它。下面是代码：
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_core_components as dcc
from dash.dependencies import In
浏览 0提问于2020-09-12得票数 2
回答已采纳
1回答
在plotly dash中的URL之间共享数据
python、plotly-dash
我想在URLS之间共享数据，但是隐藏的div没有作为回调函数中的参数更新，尽管它在页面中明显更新了。
复制的最小示例：
代码：
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
app = dash.Dash(__name__, external_stylesheets=[])
layout = [dcc.Location(id='url', refresh=
浏览 8提问于2021-02-23得票数 0
1回答
Dash中的多页应用程序-在其他页面中无法识别的下拉值
javascript、python、html、css、plotly-dash
当我移动到另一个页面时，下拉值不会被拉入和显示。 有谁能帮帮忙吗？ 我曾尝试阅读在线dash文档(https://dash.plot.ly/urls)和这篇文章(Multi-Page Dash Application)，但都没有成功。 import flask
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_auth
external_styles
浏览 12提问于2019-04-24得票数 3
2回答
在多页应用程序Dash回调的“`Input`”中使用了一个不存在的对象
python、plotly
我正试图在Dash和Plotly中构建一个基本的网页，使用回调来根据路径名交付股票图。
我还希望该图形具有一个带有单选按钮的回调，该按钮指定要显示的数据的时间周期。
这些图形工作得很好，不过我也希望其他页面可以做其他事情并返回不同的html，但是由于我在@app.layout中指定了@app.layout，所以它会显示在每个页面上。
但是，如果我将callback_layout从@app.layout中删除，则Dash中会出现一个错误，即“在Dash回调的Input中使用了一个不存在的对象--一个多页应用程序”。
我该怎么解决这个问题？我希望“股票周期”下的“回调”单选按钮只在我需要拉出Plo
浏览 6提问于2022-03-05得票数 0
回答已采纳
1回答
Plotly Dash中带有过滤器(下拉菜单)的侧边栏
python、plotly-dash
我试图用一些过滤器编写一个侧边栏，但这个下拉菜单的回调update_output不工作(不抛出错误，只是什么也不做)。 我想这是因为这个下拉列表不在主布局中，因为我的布局是由侧边栏和内容组成的。我在这个侧边栏中的下拉列表将是过滤器，这些过滤器将应用于为dashboard和dashboard2布局的图形提供数据的数据帧。 我的问题是，我应该如何或在哪里编程这些回调来为我的侧边栏下拉菜单提供功能？ sidebar = html.Div(
[
html.H2("Sidebar", className="display-4"),
浏览 8提问于2021-11-01得票数 2
1回答
带有同步下拉菜单的多页Dash应用程序不起作用
python、plotly-dash
我对Plotly非常陌生，我目前还在挣扎于我在上找到的示例，因为它不像我所期望的那样工作。
我希望有一个多页的应用程序，在所有页面上都有一个下拉菜单，作为对这些页面上显示的内容的筛选；下拉选择应该在所有页面上保持不变。我正在寻找的行为显示在下面的GIF中。
然而，当我运行菜谱时，当我打开一个新页面时，我会看到一个空的情节。
我对规范代码功能的回调的理解是，当URL更改时(即当新页面打开时)，update_graph将根据下拉选择或更新绘图。
当我运行菜谱中提供的代码时，我注意到的是，当下拉选择被更改时，update_graph回调正确地更新了图形，但是当我打开新页面时，它无法更新新页面上的图
浏览 4提问于2020-03-29得票数 0
1回答
在dash应用程序中，href可以实现为dcc.Dropdown中的值吗？
python、plotly-dash
我试图在一个多页dash应用程序中建立一个下拉页面选择器。下拉选择应根据用户选择生成更新的html。我遇到的问题是，我不知道如何在dcc.Dropdown的值选择中使用href。 下面的代码是我当前不能工作的示例。 import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__, suppress_callback_exceptions=True)
server = app.server
app.layout = html.Div([
浏览 17提问于2021-10-13得票数 0
1回答
实际上是Dash回调错误:试图隐藏Div组件
python、plotly、plotly-dash
我试图隐藏输入组件Div后，链接被点击。
我已经给出了Div id='input_fields'，这样我就可以隐藏它的子组件了，但是在return app1.layout, {'display': 'none'}上我得到了以下错误。
“回调错误更新显示-页面。子页，input_fields.children”
班级
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Br(),
html.H1("Interpret
浏览 1提问于2021-05-24得票数 0
回答已采纳
1回答
Ubuntu终端打开Python而不是运行Python文件
python-3.x、ubuntu
我试图使用python3 index.py从Ubuntu终端运行python脚本，但是Ubuntu只是打开Python终端，而不是运行实际的脚本。这种行为仅在最近几天开始，在此之前，代码按预期运行。
这只发生在一个特定的文件夹中，我相信它与文件夹的虚拟环境有关(使用venv创建)。当虚拟环境未被激活时，python3 index.py将尝试运行该文件，而我将收到一个ModuleNotFound错误。
导致此问题的文件夹包含创建仪表板web应用程序的文件，这些文件已被放入Docker容器中，因此我不确定这是否与其有关。
机器: Windows 11
Python: 3.8.10
Ubuntu:
浏览 8提问于2022-04-29得票数 1
1回答
不产生多个输出的Dash回调
plotly-dash
我试图在一个简单的回调中执行以下操作：
同时，根据URL visualization). 将用户路由到正确的布局(page_1_layout或page_2_layout)，根据URL更新数据和相关图表(其思想是，URL参数将有助于过滤数据并生成相关的)。
根据Dash文档，回调可以产生多个输出。在本例中，我试图生成正确的布局(输出#1)并更新图形(输出#2)。我也尝试过使用dataframe作为输出，但这将要求dataframe是全局的。
下面是布局代码：
app.layout = html.Div([
dcc.Location(id='url', refresh=Fa
浏览 1提问于2021-01-28得票数 0
1回答
如何将布局更新为Python应用程序
python、layout、callback、plotly-dash
我是Python & Dash的新手，我不知道如何强迫我的应用程序在不使用回调的情况下刷新显示的布局；这是我的代码：
AppMain.py
app.layout = html.Div(
children=[
dcc.Location(
id=ID_URL,
refresh=False
),
html.Div(
[
dcc.Link(
'Test',
href=HREF_PAGE_TEST,
浏览 6提问于2021-08-03得票数 0
1回答
如何在Dash中更新侧边栏布局？
plotly-dash、dash-bootstrap-components
我根据中的例子做了一个简单的侧边栏
现在，当用户更改页面时，我需要更改导航栏内容。我想让它动态化，层次化。
这意味着当页面改变时，我应该改变侧边栏的布局。当加载普通页面内容时，这非常容易，但是侧栏组件不会随页面而改变。
因此，我认为关键问题是，一旦用户单击新页面，脚本在下面的app.layout中修改了(modify_test)，如何刷新link_list？
这是侧边栏代码的基本部分(！不起作用！)：
link_list = [
dbc.NavLink("Home", href="/", active="exact"),
浏览 4提问于2021-11-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
