标签: plotly-dash

在 Plotly Dash 仪表板上，我无法让图表随着屏幕的增长而拉伸，然后在屏幕足够大时并排成一排。如果我对每个图表使用 style={"float:right"} 和 style={"float:left"} ，它会起作用，但图表将不再随屏幕拉伸。我附上了一张结果图的照片。情节超过/低于。我希望它们与一个大浏览器窗口并排，然后与一个中型浏览器窗口缩小，并与一个小浏览器窗口上方/下方。

app = dash.Dash()

app.layout = html.Div([
        dcc.Checklist(
        id='input',
        options=[
            {'label': 'Astoria', 'value': 'AST'},
            {'label': 'Warrenton', 'value': 'WAR'},
            {'label': 'Seaside', 'value': 'SEA'}
        ],
        values=['AST', 'WAR', 'SEA'],
    ),
    html.Div(className='row',
             children=[
        html.Div(
            dcc.Graph(id='value-index'),
            className='col s12 m6', 
            ),
        html.Div(
            dcc.Graph(id='rental-index'),
            className='col s12 m6',
            )
        ],

    )


])


@app.callback(
    Output('value-index', 'figure'),
    [Input(component_id='input', component_property='values')]
    )

def update_graph(input_data):

    return  {
            'data': [
                {'x': astoriaValueIndex.index, 'y': astoriaValueIndex.Value, 'type': 'line', 'name': 'Astoria'},
                {'x': warrentonValueIndex.index, 'y': warrentonValueIndex.Value, 'type': 'line', 'name': 'Warrenton'},
                {'x': …

我正在使用Python的Dash库来制作仪表板。我用来DatePickerSingle选择日期，但默认日期始终是部署日期。以下是我的代码：

from datetime import datetime as dt
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
import datetime

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


def get_date():
    # Function to check for dynamic date change, for testing purpose only
    import random
    change = random.randint(1, 20)
    return (datetime.datetime.today() - datetime.timedelta(change)).date()

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.DatePickerSingle(
        id='my-date-picker-single',
        min_date_allowed=dt(1995, 8, 5),
        max_date_allowed=dt(2017, 9, 19),
        date=get_date() # for testing purpose
        # date=datetime.datetime.today().date() # Actual code …

我的布局中有类似的东西。

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc


app = dash.Dash()

app.layout = html.Div([

    html.H1('Progress bar'),
    dbc.Progress(id="progress", value=50, striped=True, animated=True)
])

app.run_server(debug=True, port=9995)

我希望在我的仪表板应用程序中显示一个值为 50% 的进度条。但什么也没有出现。知道为什么吗？

我正在使用 Python3、Flask 和 Dash 开发一个项目。DataTable()我正在使用from可视化 CSV 表dash_table，并希望突出显示一些特定的单元格。

根据表格样式的文档，这可以通过使用style_data_conditionalDataTable 定义（参考）内部的属性来完成。

我的 CSV 表如下所示：

testclient, 0.40, 0.48, False, False, False, 0.14, True, True, 0.0, 2
raspberrypi, 0.20, 0.21, False, True, False, 0.18, True, False, 0.0, 3

当尝试访问第一列时，所有样式更改都有效。

[...]
style_data_conditional=[
    {
        'if': {
            'column_id': 'hostname',
            'filter_query': '{hostname} eq "testclient"'
        },
        'color': 'green',
    }
],
[...]

但是，当尝试访问任何其他行列（如“ftp”或“http”）时，它将无法工作，即使我debug=True在函数调用中使用该参数app.run(...)，也不会得到任何错误输出。

[...]
style_data_conditional=[
    {
        'if': {
            'column_id': 'ftp',
            'filter_query': '{ftp} eq "True"'
        },
        'color': 'green',
    } …

我有一个 gtag.js，其中包含我的跟踪代码。

谷歌说要将此添加到我的顶部，请问我如何为我的仪表板应用程序点他的？

我尝试将其添加为 /assets 下的 gtag.js 但没有成功

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-*****-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-******-1');
</script>

我正在使用plotly Dash，并且页面上的破折号组件的位置存在问题。它\xe2\x80\x99s\xe2\x80\x98更改年份\xe2\x80\x99下拉列表，如下图所示。我希望它位于我用箭头显示的位置，而它\xe2\x80\x99s位于我的第一个无线电项目组件下方。\n

我的代码如下：

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]\n\napp = dash.Dash(__name__, external_stylesheets= external_stylesheets  )\n\n# determining the layout of the page\napp.layout = html.Div( [\n    html.Div( [\n        html.Label( [\'Change continent:\'],\n                    style={\'font-weight\': \'bold\', \'display\': \'inline-block\', \'justifyContent\': \'center\', \'width\': \'65%\',\n                           \'height\': \'100%\'},\n                    ),\n\n        dcc.RadioItems(\n            id=\'radio_ITEMS\',\n            options=[\n            {\'label\': \'AMERICA\', \'value\': \'graph1\'},\n            {\'label\': \'EUROPE\', \'value\': \'graph2\'},\n            {\'label\': \'ASIA\', \'value\': \'graph3\'}],\n            value=\'graph1\',\n\n\n        ),\n    ], className=\'six columns\' ),\n\n    html.Div( [\n            html.Label( [\'Change the variable:\'],\n                        style={\'font-weight\': \'bold\', \'display\': \'inline-block\', \'justifyContent\': \'center\', \'width\': \'65%\',\n                               \'height\': \'100%\'},\n                        ),\n\n            dcc.RadioItems(\n                id=\'radio_items2\',\n                options=[{\'label\': x, …

我在dash_table.DataTable数据框中显示，其中有一列颜色名称为十六进制格式，代码如下：

import dash
import dash_table
import pandas as pd

df = pd.DataFrame(data = dict(COLOR = ['#1f77b4', '#d62728', '#e377c2', '#17becf', '#bcbd22'],
                              VALUE = [1, 2, 3, 4, 5]))

app = dash.Dash(__name__)

app.layout = html.Div([dash_table.DataTable(id = 'table',
                                            columns = [{"name": i, "id": i} for i in df.columns],
                                            data = df.to_dict('records'))],
                      style = dict(width = '200px'))

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

这就是我得到的：

我想设置每个单元格及其内容的背景颜色（可能还有字体颜色），但仅限于该列（始终是表格的第一列）以获得以下结果：

对我来说可以dash_table.DataTable用plotly.graph_objects.Table（文档）替换，这也许更可定制；plotly.graph_objects.Table前提是我可以在仪表板中实现dash。

版本信息：

Python               3.7.0
dash                 1.12.0
dash-table           4.7.0 …

因此，文档几乎使它看起来像默认情况下不支持为同一trace( ) 的不同项目显示多个图例。您应该继续向图中添加新的跟踪，并且每个跟踪都包含自己的图例。plotly.graph_objs.ScatterPlotly

然而，这对于我的具体情况来说似乎很麻烦。我拥有的是一个图表，Plotly Dash用户可以在其中搜索不同的节点和路径，因此我根据搜索定义不同的颜色，并在单个跟踪中定义所有这些（通过使用分散中的色阶和颜色）。

当用户搜索图中的不同节点时，我会对它们进行独特的着色。我想专门为突出显示这些节点的每种不同颜色显示一个图例。

是否可以在一次跟踪中完成此操作？

我正在用 Plotly 制作分区统计图。但是，地理地图看起来很小。

像那样：

我的代码在这里：

fig = px.choropleth(df,
                    geojson=geojson,
                    locations="Capitalize",
                    featureidkey="properties.name",
                    color="Scale",
                    hover_name='Capitalize',
                    hover_data=['Quantity'],
                    animation_frame="Period",
                    projection="mercator",)

fig.update_geos(fitbounds="locations", visible=False)
fig.update_layout(title_text = 'Product A',
                  autosize=True,
                  hovermode='closest',
                  title_x = 0.5,
                  margin={"r":0,"t":100,"l":0,"b":0},
                  geo=dict(showframe = False, showcoastlines = False))

宽度和高度属性并没有完全达到我想要的效果。我只想放大地理地图。我怎样才能在情节中做到这一点？

我有一个如下所示的 dash.datatable，但列宽对于我的值来说太长，列宽应限制为相应列的最大长度字。

我的代码：

app = JupyterDash(__name__)

df = pd.DataFrame(
{
    "A" : ["one","two","three"],
    "B" : ["one","two","three"],
    "C" : ["one","two","three"],
    
}
)
app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_data={
        'whiteSpace': 'normal',
        'height': 'auto',
    },
    
)

if __name__ == "__main__":
    app.run_server(mode="jupyterlab")

我的数据表看起来像：