标签: plotly-dash

我想弄清楚如何组织一个包含多个应用程序的破折号项目.所有示例都是单页应用程序,我希望将多个破折号组织为一个由gunicorn运行的项目(在docker容器内):

dash-project/
  app1/
     layout.py
     data.py
  app2/
     layout.py
     data.py
  run.py( or run.sh)

这是一个正确的方法吗？什么应该在里面,run.py或者run.sh,如果有的话？我如何使用gunicorn来提供多个应用程序？

我对通过烧瓶本地托管的情节和破折号的隐私感到困惑.

给定了一个向Flask托管仪表板的项目给我本地网络上的用户:

如果我根据部署用户指南(https://plot.ly/dash/deployment)使用Flask服务器部署Dash应用程序,即:

import flask
import dash

server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)

如果我向破折号应用程序提供数据,是否可以在任何地方在线发布(即情节网站)？

如果我创建一个图形,如plotly.graph_objs.Figure在dash_core_components.Graph？服务于此数字的数据是否会在线发布？或者我是否必须指定使用plotly.offline.plot以确保它不连接到外部服务器,类似于使用plotly的笔记本？

我想将我在dash中制作的网站导出为静态PDF.这是我网站的代码(它只是一个包含3列的图表):

import dash
import dash_core_components as dcc
import dash_html_components as html
import pdfkit
from flask import Flask, render_template, make_response

app = dash.Dash()
app.layout = html.Div(
                className="three columns",
                children=html.Div([
                    dcc.Graph(
                        id='right-top-graph',
                        figure={
                            'data': [{
                                'x': [1, 2, 3],
                                'y': [3, 1, 2],
                                'type': 'bar'
                            }],
                            'layout': {
                                'height': 400,
                                'margin': {'l': 10, 'b': 20, 't': 0, 'r': 0}
                            }
                        }
                    ),


                ])
            )

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

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

我尝试使用pdfkit将此代码添加到我的脚本中,但它不起作用(收到一个错误,告诉我render_template()需要1个位置参数但是给出了2个):

rendered = render_template('pdf_template.html',app)
pdf = pdfkit.from_string(rendered, False)
response …

我正在使用Plotly-Dash并且需要我的文本注释的字体大小来缩放视口宽度,就像我的图形那样.对于我的布局不同的头,我能够直接设置font-size: '1vw',但vw不是用于设置的接受单元font-size的style一个属性dcc.Graph分量.这是相关的追溯:

ValueError:为scatter.textfont的'size'属性收到的元素无效.无效元素包括:['1vw','1vw','1vw','1vw','1vw','1vw','1vw' ,'1vw','1vw','1vw']

The 'size' property is a number and may be specified as:
  - An int or float in the interval [1, inf]
  - A tuple, list, or one-dimensional numpy array of the above

Run Code Online (Sandbox Code Playgroud)

我认为如果dcc.Graph组件可以接受视口单元(例如style = {height: 30vw, width: 30vw})并简单地将它们转换为浏览器侧的像素,那么我应该能够执行类似的转换font-size.

在Python端有没有办法以像素为单位检索视口宽度,这样我就可以为字体大小执行自己的缩放逻辑？

以下是演示此行为的示例Dash应用程序:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

labels …

我需要帮助向图表添加文本。

我尝试过 text = 'y' 和 text-position = 'inside' 但文本会垂直或被挤压成小条形图，以便它可以适合条形图。我只是想让它写下来。

这是需要修复的代码的工作示例：

app = dash.Dash(__name__)
app.css.append_css({'external_url': 'https://codepen.io/amyoshino/pen/jzXypZ.css'})

    labels1 = ['0-7', '8-12', '13-15', '16-20', '21-25', '26+']
values1 = [10, 30, 10, 5, 6, 8]


labels2 = ['India', 'Scotland', 'Germany', 'NW England', 'N Ireland', 'Norway', 'NE England', 'Paris', 'North Africa', 'scandinavia']
values2 = [1, 0, 4, 9, 11, 18, 50, 7, 0, 2]

values3 = [10, 111, 75, 20]
labels4 = ['Safety Manager', 'Office Administrator', 'Internal Officer', 'Assistant Producer']

bar_color = ['#f6fbfc', '#eef7fa', …

我正在使用python 3.6.5和plotly 3.9.0创建交互式折线图，用户可以使用游标幻灯片更改范围。

我想向范围滑块添加一个悬停工具，以便当用户移动滑块时，悬停图标会在用户释放鼠标之前说出新的日期范围。

我认为这是bokeh的默认设置，但我已经放弃了，转而使用散点图。

能做到吗？

下面是我尝试做的一个最小工作示例。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import plotly.plotly as py

from datetime import datetime
import pandas as pd
import numpy as np

np.random.seed(10)
df = pd.DataFrame({
    'date':pd.date_range(start='1/1/2000', periods=200),
    'x': np.random.choice(range(100),200)
})

app = dash.Dash()
app.layout = html.Div([
    dcc.Graph(
        id='graph',
    ),

    dcc.RangeSlider(
        id='slider',
        min = df['date'].min().timestamp(),
        max = df['date'].max().timestamp(),
        value=[df.iloc[-101]['date'].timestamp(), df.iloc[-1]['date'].timestamp()]
    )

])


@app.callback(
    dash.dependencies.Output('graph','figure'),
    [dash.dependencies.Input('slider','value')])

def update_figure(value):
    lBound = pd.to_datetime(value[0], unit='s')
    uBound = pd.to_datetime(value[1], unit='s') …

我使用绘图破折号绘制了两个图表。但是，当 y 轴/x 轴刻度尺寸更大时，它会被切断。

Y 轴：

代码 ：

data = [go.Scatter(x = df[df[\'S2PName-Category\']==category][\'S2BillDate\'],\n                       y = df[df[\'S2PName-Category\']==category][\'totSale\'],\n                       mode = \'markers+lines\',\n                       name = category) for category in df[\'S2PName-Category\'].unique()]\n\n    layout = go.Layout(title=\'Category Trend\',\n        xaxis = dict(title = \'Time Frame\', tickformat = \'%d-%b-%y\'),\n        yaxis = dict(tickprefix= \'\xe2\x82\xb9\', tickformat=\',.2f\',type=\'log\'),\n        hovermode = \'closest\',\n\n        plot_bgcolor =  colors[\'background\'],\n        paper_bgcolor = colors[\'background\'],\n        font = dict(color = colors[\'text\'])\n        )\n

X 轴：

代码 ：

data = [go.Scatter(x = df[df[\'S2PName\']==item][\'S2BillDate\'],\n                   y = df[df[\'S2PName\']==item][\'totSale\'],\n                   mode …

我想在 plotly dash 中绘制一个带有两个子图的图表。我的整个图表如下所示：

import pandas as pd
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from plotly.subplots import make_subplots
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv').iloc[:60]
fig = make_subplots(rows=2, cols=1, row_heights=[0.8, 0.2], vertical_spacing=0)

fig.add_trace(go.Candlestick(open=df['AAPL.Open'], high=df['AAPL.High'], low=df['AAPL.Low'], close=df['AAPL.Close'],
                             increasing_line_color='#0384fc', decreasing_line_color='#e8482c', name='AAPL'), row=1, col=1)

fig.add_trace(go.Scatter(y=np.random.randint(20, 40, len(df)), marker_color='#fae823', name='VO', hovertemplate=[]), row=2, col=1)

fig.update_layout({'plot_bgcolor': "#21201f", 'paper_bgcolor': "#21201f", 'legend_orientation': "h"},
                  legend=dict(y=1, x=0),
                  font=dict(color='#dedddc'), dragmode='pan', hovermode='x unified',
                  margin=dict(b=20, t=0, l=0, r=40))

fig.update_xaxes(showgrid=False, zeroline=False, rangeslider_visible=False, showticklabels=False,
                 showspikes=True, spikemode='across', spikesnap='data', …

背景

Dash Web 应用程序有一个 dash 应用程序实例，通常命名为app，并像这样启动：

app = dash.Dash(__name__)

然后，使用callback装饰器将回调添加到应用程序中：

@app.callback(...)
def my_function(...):
    # do stuff.

在您找到的大多数教程中，回调是使用app.py. 这当然只是 MWE 的做事方式。在实际应用程序中，将代码分离到模块和包将大大提高可读性和可维护性，但天真地将回调和布局分离只会导致循环导入。

题

从app.py单页应用程序中分离回调和布局的正确方法是什么？

移动电源

这是问题的最小（非）工作示例

文件结构

.
??? my_dash_app
?   ??? app.py
?   ??? views
?       ??? first_view.py
?       ??? __init__.py
??? setup.py

设置文件

import setuptools

setuptools.setup(
    name='dash-minimal-realworld',
    version='1.0.0',
    install_requires=['dash>=1.12.0'],
    packages=setuptools.find_packages(),
)

应用程序

import dash

from my_dash_app.views.first_view import make_layout

app = dash.Dash(__name__)
app.layout = make_layout()


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

first_view.py

@app.callback(...)
def …

我想仅在单击按钮后才使用 plotly 显示图形，但我不确定如何进行此操作。我的图存储在以下代码位中

    fig1 = go.Figure(data=plot_data, layout=plot_layout)

然后我使用以下代码位定义我的应用程序布局：

app.layout = html.Div([
                #button
                html.Div(className='submit', children=[

                html.Button('Forecast', id='submit', n_clicks=0)
                ]),
                #loading 
                dcc.Loading(
                id="loading-1",
                type="default",
                children=html.Div(id="loading-output-1")
                ),
                #graph
                dcc.Graph(id= 'mpg-scatter',figure=fig),
    
                #hoverdata
                html.Div([
                    dcc.Markdown(id='hoverdata-text')
                ],style={'width':'50%','display':'inline-block'})
])

@app.callback(Output('hoverdata-text','children'),
             [Input('mpg-scatter','hoverData')])

def callback_stats(hoverData):
    return str(hoverData)


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

但问题是我只想首先显示按钮。然后当有人点击预测按钮时，加载功能出现，一秒钟后图表显示。我定义了一个 dcc.loading 组件，但不确定如何定义此功能的回调。