标签: plotly-dash

我尝试了DCC Loading component，还尝试了CSS当组件处于加载状态时禁用屏幕上默认的“正在加载..”文本的方法。它根本不起作用。请建议我一种将默认加载消息更改为CSSin加载程序的方法Plotly's Dash。

这是dashapp.py将作为登录页面加载的文件：

from dash import Dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html 
from dash.dependencies import Input, Output, State
from config import appserver
import time

external_stylesheets = [dbc.themes.YETI,'./frontend/static/stylesheet.css']

dashapp = Dash(__name__, server = appserver,external_stylesheets=external_stylesheets,\
url_base_pathname='/application/', title='Home Page', assets_url_path='assets')

dashapp.css.config.serve_locally = True

dashapp.layout = html.Div([
    html.H1('Hi Welcome to Dash-Flask integration app!'),
], id="child-process")

if __name__=='__main__':
    dashapp.run_server(debug=True)

样式CSS表位于目录： 中./frontend/static/。
我使用 …

我正在使用绘图go.Indicator来显示数据集的某些值。这是我的代码：

import dash_core_components as dcc
import plotly.graph_objects as go

value = dff.shape[0]
fig = go.Figure()
fig.add_trace(go.Indicator(
    mode="number",
    value=value,
    domain={'row': 0, 'column': 0},
    title='Total number of incidences'
)
fig.update_layout(
    paper_bgcolor ='lightgray',
    grid={
        'rows': 1,
        'columns': 1,
        'pattern': 'independent'
    }
)

dcc.Graph(
    id='indicator-incidences',
    figure=fig
)

和这里就是图中所表示的。正如您所看到的，它扩展到页面的总宽度，并且高度大于必要的高度。

如何实现图形根据其包含的指示器调整大小？

我正在尝试将 Plotly Dash 仪表板组织成列的部分，但我无法理解我在这里做错了什么。我已将我的组件包含在一个 dbc.Row 内的单独 dbc.Cols 中，并指定了我希望它们占用的列的宽度，但所有内容都只是堆叠在一起。理想情况下，我会将卡片单独放在左侧的一栏中，然后将问题放在右侧。有人可以帮我诊断我正在做的事情导致我的所有组件堆叠吗？

#Import packages
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State



app = dash.Dash()

#App Layout
app.layout = html.Div([
    dbc.Row(children=[
                dbc.Col(id="card_col",width = 6),
                dbc.Col(id="form", width=6, children=[
                    html.Div([
                        dbc.FormGroup(children=[
                            dbc.Label("Question 1"),
                            dbc.Col(
                                dcc.Input(type="text", id="q1", placeholder="Enter your info"),
                                width=6
                            )
                        ],row=True)
                    ]),
                    html.Br(),
                    html.Div(children=[
                        dbc.FormGroup(children=[
                            dbc.Label("Question 2?"),
                            dbc.Col(
                                dbc.Input(type="text",id="q2",placeholder="Enter your info"),
                                width=6
                            )
                        ],row=True)
                    ]),
                    html.Br(),
                    html.Div([
                        dbc.FormGroup(children=[
                            dbc.Label("Yes/No?"),
                            dbc.Col(
                                dbc.RadioItems(id="q3",options=[{"label": "Yes", "value": …

我在 Plotly 中创建了一个 Web 应用程序，其中显示了一系列不同的数据表。

有没有一种简单的方法来添加条件格式以将最后一行更改为粗体字体？

我基本上想将最后一行突出显示为平均行，但除了它是表的最后一行这一事实之外，过滤器中没有任何可引用的内容。

谢谢

）当我想导入 dash_core_components 时

import dash_core_components as dcc

它抛出以下错误：

File "d:\Desktop\python_projekte\ds2.py", line 1, in <module>
    import dash_core_components as dcc
  File "C:\Python39\lib\site-packages\dash_core_components\__init__.py", line 1, in <module>
    from dash.dcc import *  # noqa: F401, F403, E402
ModuleNotFoundError: No module named 'dash.dcc'

但我实际上安装了 dash_core_components 并且我也尝试更新它，但我仍然收到此错误。我在 dash_html_components 中也遇到了类似的错误。

我真的不知道该怎么办。有人有建议吗？:-)

我试图将图形和表格并排放置，但表格始终垂直显示在图形下方，尽管其水平位置正确。如果两个元素都是数字，类似的代码对我有用。这是一个最小的代码示例。

fig = make_subplots()
fig.add_trace(go.Scatter(x = [1,2,3], y = [1,2,3]))
df = pd.DataFrame({'col1': [1, 2, 3], 'col2': ['This is a test ', 'This is a test', 'This is a test'], 'col3': [99, 100, 101]})

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([dcc.Graph(figure = fig)], style = {'width': '49%', 'display': 'inline-block'}),
    html.Div([dt.DataTable(
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        style_table = {'height': 200, 'overflowX': 'auto'})], style = {'width': '49%', 'display': 'inline-block'}),
])

if __name__ == '__main__':
    app.run_server(debug = True)

这是我得到的图像：

我正在使用plotly-dash 和jupyter dash。我想知道如果 Jupyter dash 运行并在 app.run_server(mode='external',debug=True,port=8050) 之后启动仪表板，我是否可以自动打开网站。

原因是我必须登录网站才能连接到仪表板的数据。

谢谢

我有一个有 4 列的 pandas 数据框，类似于这样的东西-

a = [19.1, 18.4, 19.2, 18.2, 17.4]
b = [62.28, 57.07, 55.61,54.09,54.6]
c = [18.68,17.79,17.03,18.62,18.62]
d = [73.03,71.63,70.22,71.77,71.77]

我正在使用 Plotly Express 绘制折线图以可视化每一列。我想单独为 a 和 c 列绘制虚线（虚线），为 b 和 d 列绘制常规线。如何使用 Plotly Express 为 a 列和 c 列创建虚线？

如何默认选择图例中的一项，而取消选择其他项目？

我希望最初的情节看起来像这样：

#prepare thr chart
fig = px.line(df, x='date', y='diesel_price', color='region', 
                title='Diesel price in the US', 
                labels={'date':'Date', 
                'diesel_price':'Price ($)', 'region':'Region'})

app.layout = html.Div([
    html.H4('Metrics for trucking companies'),
    dcc.Graph(figure=fig),
])

if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0', port=8050)

我最近一直在尝试使用Dash构建应用程序，但是尽管浏览了许多指南，但我仍然无法弄清楚如何将熊猫数据框导入Dash的数据表（本质上是熊猫数据框，但Web托管和响应式除外） 。

大多数示例说明了如何从示例中已经进行硬编码的数据帧中手动选择某些列/行，如此处所示。但是，在我的情况下，数据帧是在代码内构建的（而pandas是实现此目的的最简单方法），因此我最终不得不找出一种将a转换pd.Dataframe()为a的方法dash_table.DataTable()。

我该如何进行这项工作？使用引用，我尝试了以下代码将我的数据帧的字典发送到dash_table.DataTable()，但没有任何显示。

我的代码：

## Imports
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table

from dash.dependencies import Input, Output, State

import datetime as dt
import pandas as pd
import numpy as np

## Custom functions that creates the pandas dataframe
from twitter_functions import old_tweets

app = dash.Dash(dev_tools_hot_reload=True)
app.scripts.config.serve_locally = True
app.config['suppress_callback_exceptions'] = True


app.layout = html.Div(children=[

    html.H3('Twitter App'),

    dcc.Input('ScreenName_Input', type='text'),

    html.Button(id='screenNames_submit_button', children='Submit'),

    dash_table.DataTable(id='tweet_table')

])

@app.callback( …