标签: plotly-dash

Python dash Div整页背景图片

抱歉,我对 dash、css、html 编码很陌生。

我正在 Python 上使用 Dash,我想要一个带有图像的简单的整页背景。

我正在使用这个CSS:https ://codepen.io/chriddyp/pen/bWLwgP.css

我尝试使用不同的CSS(https://necolas.github.io/normalize.css/8.0.1/normalize.css),因为我读到这是一个边距问题,但它不起作用

我读过很多关于这个问题的讨论,但我无法根据我的目的修复它

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app       = dash.Dash(__name__,
                      external_stylesheets = external_stylesheets)


app.title = "Q"


colors = {'background': '#ffffff',
          'bg_home': '#666666',
          'text': '#ffa500',
          'background_plot': '#cccccc',
          'text_plot': '#000000'}

app.config['suppress_callback_exceptions']=True
image   = 'url(https://c.wallhere.com/photos/a1/fc/1920x1080_px_Albert_Einstein_Formula_mathematics_physics_science_Special_Relativity-549404.jpg!d)'

app.layout = html.Div(

                className='row',
                  style={
                          'verticalAlign':'middle',
                          'textAlign': 'center',
                          'background-image':image,


                            },

                  children= [
                           html.Div(
                                   id='Username',
                                    style={'textAlign': 'center',
                                           'verticalAlign':'middle',
                                           },
                                    children= [         
                                            html.H3('Login',
                                                        style={'textAlign': 'center',
                                                           'color':'orange',
                                                           'fontWeight': 'bold',
                                                               },                                                       
                                                    ),
                                            html.Div(             
                                                    className='row', 
                                                    children=[
                                                         dcc.Input(id = 'user',
                                                                   style={'margin-top':20},
                                                                  type='text',
                                                                  placeholder='Username'
                                                                  ) …
Run Code Online (Sandbox Code Playgroud)

css python plotly-dash

3
推荐指数
1
解决办法
1万
查看次数

在绘图破折号中更新回调之外的应用程序状态

我正在编写一个情节 Dash 应用程序,我最初没有数据库访问权限,因此我需要等待数据库连接,然后才能设置初始应用程序状态。

因此,我想运行一个稍后设置应用程序状态的函数,但设置状态的唯一方法似乎是使用@app.callback()装饰器,但问题是它们需要在触发之前监视属性或状态变量,但就我而言我没有观看 Dash 应用程序的一部分,而是观看外部内容。

我怎样才能在达世币中做到这一点?

例如:

app = Dash(routes_pathname_prefix='/dash/trend/')

app.layout = html.Div(children=[
    dcc.Dropdown(
        options=get_field_options(),
        id='field_select',
        multi=True,
    )
])

@app.callback(
    dash.dependencies.Output('field_select', 'options'),
    [
         # What do I put here as an input??
    ]
)
def update_fields(href):
    return get_field_options()
Run Code Online (Sandbox Code Playgroud)

python plotly plotly-dash

3
推荐指数
1
解决办法
6776
查看次数

同一行的不同标记颜色

我正在尝试使用plotly 和dash 为网络应用程序创建一个简单的线图。我想要一条连接两点的线。我希望其中一个点是红色,另一个点是绿色。这是我到目前为止所拥有的:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
graph = dcc.Graph(figure = {
    'data' : [
        go.Scatter(x = [1,4], y = [2,3], mode = 'lines+markers', opacity = 0.7, marker = {
            'size' : 15,
            'line' : {'width' : 0.5, 'color' : 'black'}
        })
    ]
})
app.layout = html.Div([graph])
if __name__ == '__main__':
    app.run_server(debug = False)
Run Code Online (Sandbox Code Playgroud)

我在包含所有最新软件包的 Jupyter 笔记本中运行此代码。如果我运行这段代码,我会得到我想要的线图,但两个点都是蓝色的。我希望对应于 (1, 2) 的点为红色,(4, 3) …

python plotly plotly-dash

3
推荐指数
1
解决办法
2071
查看次数

如何缓存 SQL 结果,这样我就不必重复调用 SQL 来获取虚线图的数据?

我正在尝试构建一个仪表板,它将根据单个 SQL 数据查询生成多个图表。我希望可以通过仪表板修改查询(例如查询不同的订单金额或类似金额),然后立即更改所有绘图。该查询可能很昂贵,所以我不希望它为 N 个不同的图运行 N 次。

我尝试使用 Flask 缓存装饰器来执行此操作@cache.memoize(),类似于文档中给出的示例: https: //dash.plotly.com/performance

这是我正在做的事情的精简版本。我可以看出该query_data函数没有按照我的预期执行,因为: 1. 生成的图表在 x 轴上显示不同的数据点。如果它使用相同的缓存数据集,则 x 中的数据点应该相同 2.每次我更改输入单元格时,函数print中的语句query_data都会出现两次。

任何人都可以解释为什么这不起作用或者我如何实现我想要的。

import sys

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output

from setup_redshift import setup_connection
from flask_caching import Cache
from datetime import datetime
import pandas as pd

conn = setup_connection()

app = dash.Dash(__name__)
cache = Cache(app.server, config={
    # 'CACHE_TYPE': 'filesystem',
    'CACHE_TYPE': …
Run Code Online (Sandbox Code Playgroud)

python flask plotly-dash

3
推荐指数
1
解决办法
1452
查看次数

Python 情节 | 禁用具有子图的图中的所有范围滑块

使用plotly(dash),我使用figure.add_candlestick(**args)将多个子图添加到图形中

循环完成后,我禁用 xaxis_rangeslider_visible,但第二个/最后一个图表的底部仍然有一个范围滑块。有谁知道如何在具有多个绘图的图中隐藏所有范围滑块?

PositionFig = PositionFig.update_layout(xaxis_rangeslider_visible=False,
                          title_text="Position Charts",
                          height=1000)
Run Code Online (Sandbox Code Playgroud)

python plotly plotly-dash

3
推荐指数
1
解决办法
2880
查看次数

将颜色映射到plotly go.饼图中的标签

我正在使用 make_subplots 和 go.Pie 绘制一系列 3 个饼图。我想最终将它们放入破折号应用程序中,用户可以在其中过滤数据并且数字将更新。如何将特定颜色映射到变量,以便男性始终为蓝色,女性始终为粉红色等。您可以使用 color_discrete_map 的plotlyexpress 来完成此操作,但据我所知,plotlyexpress 不支持子图。

这是我制作性别饼图的示例 df。其他 dfs 具有相同的格式,只是值不同。

    Gender  ACC_ID  percent
0   Female  57647   57.0
1   Male    37715   37.0
2   Other   5875    6.0
Run Code Online (Sandbox Code Playgroud)

这是我用来制作数字的代码

fig = make_subplots(rows=1, cols=3, specs=[[{'type':'domain'}, {'type':'domain'},{'type':'domain'}]])
fig.add_trace(go.Pie(labels=age["Age_Group"], values=age["percent"],customdata=age["ACC_ID"], textinfo='label+percent',insidetextorientation='horizontal', textfont=dict(color='#000000'), marker_colors=px.colors.qualitative.Plotly),
              1, 1)
fig.add_trace(go.Pie(labels=gender["Gender"], values=gender["percent"], customdata=gender["ACC_ID"],textinfo='label+percent',insidetextorientation='horizontal',textfont=dict(color='#000000'),marker_colors=px.colors.qualitative.Plotly),
              1, 2)
fig.add_trace(go.Pie(labels=sample["Sample_Type"], values=sample["percent"], customdata=sample["ACC_ID"],textinfo='label+percent',texttemplate='%{label}<br>%{percent:.1%f}',insidetextorientation='horizontal',textfont=dict(color='#000000'),marker_colors=px.colors.qualitative.Prism),
              1, 3)


fig.update_traces(hole=.4, hoverinfo='label+percent', hovertemplate="<b>%{label}</b><br>Percent: %{percent}<br>Total: %{customdata}<extra></extra>")

fig.update_layout(
    showlegend=False,
    uniformtext_minsize=14, 
    uniformtext_mode='hide',

    annotations=[dict(text='Age', x=0.13, y=0.5, font_size=20, showarrow=False, font=dict(color="black")),
                 dict(text='Gender', x=0.5, y=0.5, font_size=20, showarrow=False,font=dict(color="black")),
                 dict(text='Sample', x=0.879, y=0.5, font_size=20, showarrow=False,font=dict(color="black"))])
    

plot(fig)
Run Code Online (Sandbox Code Playgroud)

python plotly plotly-dash

3
推荐指数
2
解决办法
1万
查看次数

Plotly Dash 使用 dcc.Store 在另一个页面中共享回调输入

我有一个 2 页应用程序,在第一页(app.py)上,我使用 dcc.Store 在会话缓存中存储一​​个值,然后尝试在第二页(app2.py)中加载此数据,并且将其显示为 html.H1。

这是我在第一页的代码:

dcc.Store(id='session', storage_type='session'), 
Run Code Online (Sandbox Code Playgroud)

那么我在这个页面上的回调是:

@app.callback(Output('session', 'data'),
              [Input('q1', 'value')])
def q1_value(q1):
     return {'answer1value': q1}
Run Code Online (Sandbox Code Playgroud)

而“q1”是我的无线电项目的值。

但是当我运行这个应用程序时,H1 中没有显示任何内容。我花了很多时间修复这个问题但失败了,有人可以帮忙吗?

python callback plotly plotly-dash

3
推荐指数
1
解决办法
3093
查看次数

条件颜色样式:plotly go.Bar

我想向堆积条形图添加条件样式。具体来说,堆栈的顶部栏将根据 x 轴值进行条件调整。

这是我的代码:

# sample df
df = pd.DataFrame({'Date': ['2010 - Q3','2010 - Q4','2011 - Q1','2011 - Q2','2011 - Q3','2011 - Q4'],
                   'Rate' : ['11.4','12.2','14.4','15.5','10.1','13.1'],
                   'Rate1': ['2.1','2.3','1.9','1.6','2.5','1.1']
                 })


clrs = 'rgb(222,0,0)'


fig = go.Figure(

            data=[

                  go.Bar(
                        x=df['Date'],
                        y=df['Rate'],
                        name='Natural Level'
                        ),

                  go.Bar(
                        x=df['Date'],
                        y=df['Rate1']),
                        name='Change',
                        marker=dict(color=clrs)
                        )

                  ],

            layout=go.Layout(

                title='Measuring excess demand and supply in the market.',

                xaxis=dict(
                    tickangle=90,
                    tickfont=dict(family='Rockwell', color='crimson', size=14)
                ),

                yaxis=dict(
                    title='Rate',
                    showticklabels=True
                ),

                barmode='stack',

            )
        ) 
Run Code Online (Sandbox Code Playgroud)

clrs变量采用以 x 轴值列表为条件的颜色值。IE clrs = rgb(222,0,0) if …

python plotly plotly-dash plotly-python

3
推荐指数
1
解决办法
5066
查看次数

Plotly-Dash:如何确定客户端回调中的触发输入

Dash 的文档描述了如何在服务器端回调的情况下确定哪个输入触发了回调:高级回调

有没有办法确定哪个输入触发了客户端回调?

看起来这个功能是在版本 1.13.0 ( #1240 ) 中添加的,但我的浏览器控制台表明这dash_clientside.callback_contextundefined. 我运行的是 Dash 版本 1.19.0。

编辑:我遇到的错误是由于我的 Dash 安装问题造成的。我是通过 进行安装的conda install dash,Anaconda 主频道上的 Dash 软件包似乎有问题。从 conda forge 安装修复了问题:conda install -c conda-forge dash。请参阅已接受的答案以获取工作示例。

javascript python plotly plotly-dash

3
推荐指数
1
解决办法
2681
查看次数

流式传输实时 Websocket 流数据并使用类中的破折号更新绘图图

如果这是一个愚蠢的问题,我深表歉意,但我想知道是否可以创建一个破折号应用程序并将实时数据直接流式传输到图表中?

我一直在开发一个包含许多元素的交易机器人。我目前正在尝试从 websocket 传输每 2000 毫秒更新一次的数据,并将其直接输入图表中。

我对编程相对较新,因此可以在必要时使用一些帮助和批评!

因此,由于此实时图表最终将作为 GUI 和机器人功能的一部分合并,因此我尝试使这个 PriceTicker 类既包含初始化 dash 应用程序,又包含使用接收到的 websocket 流实时更新图表。

我能够毫无问题地传输数据,并且可以将数据解析为 json、csv 或任何其他内容。我还可以在破折号应用程序中初始化图表,但它不会使用新数据更新图表。

我查看了一般区域的一些帖子,但不幸的是没有找到任何可以解释我的情况的内容 - 抱歉,如果有我错过的帖子!

下面是我的完整代码:

from binance.client import Client
from binance.websockets import BinanceSocketManager
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input
import plotly
import plotly.graph_objs as go
from collections import deque
import pandas as pd
import json

class priceTicker:

    def __init__(self, api_key, secret_key):
        self.app = dash.Dash(__name__)
        self.ticker_time = deque(maxlen=200)
        self.last_price = deque(maxlen=200)
        self.app.layout = html.Div( …
Run Code Online (Sandbox Code Playgroud)

python-3.x plotly-dash binance

3
推荐指数
1
解决办法
3332
查看次数