首页 > 解决方案 > 在 Dash Plotly 中绘制 3D 图表

问题描述

我在为我的 Dash 应用程序创建 3D 图表时遇到了一些困难。该代码不会引发任何错误。它返回一个空的 2D 图表(甚至不是 3D 图表)。

我检查了变量 z、x、y - 它们包含正确的值 + 形状。代码片段来自Plotly,图表示例“将 x 和 y 数据传递到 3D 曲面图”。知道我缺少什么吗?

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output
import plotly.graph_objects as go

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children="My 3D Chart!"),
    dcc.Graph(
        id='my-graph'
    ),
    ])

@app.callback(Output('my-graph', 'figure'))

def create_chart():
    z = df_size_rolled.values
    sh_0, sh_1 = z.shape
    x, y = np.linspace(0, 1, sh_0), np.linspace(0, 1, sh_1)

    fig = go.Figure(data=[go.Surface(z=z, x=x, y=y)])

    return fig

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

我也试过,但没有奏效:

data=[go.Surface(z=z, x=x, y=y)]

return {'data': [data]}

非常感谢任何帮助。

标签: pythonplotlyplotly-dash

解决方案


似乎 Dash 中不需要“数据”- 属性。

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("3D Charts", style={"textAlign": "center"}),
    html.Div([html.Div([html.Span("Type Of Chart : ")], className="six columns",
                       style={"textAlign": "right", "padding-right": 30, "padding-top": 7}),
              html.Div([dcc.Dropdown(id='select-date', options=[{'label': i, 'value': i} for i in my_dates],
                                     value="2018-02-06")], className="six columns",
                       style={"width": "40%", "margin-left": "auto", "margin-right": "auto", "display": "block"}),
              ], className="row", style={"width": "80%"}),
    html.Div([dcc.Graph(id='my-graph')], className="row")
], className="container")

@app.callback(
    dash.dependencies.Output('my-graph', 'figure'),
    [dash.dependencies.Input('select-date', 'value')])
def update_graph(selected):
    global df_sliced

    df_sliced = df_size.loc[selected:selected]
    df_sliced = df_sliced.rolling(6).mean()
    df_sliced = df_sliced.dropna()

    trace2 = [go.Surface(
        z = df_sliced.values,

        colorscale='Rainbow', colorbar={"thickness": 10, "len": 0.5, "title": {"text": "Volume"}})]
    layout2 = go.Layout(
        title="Orderbook Structure " + str(selected), height=1000, width=1000, scene = dict(
                    xaxis_title='Order Level - Bid Side[0-9], Ask Side[10-19]',
                    yaxis_title='Time 08.00 until 22.00 (5Min Intervals)',
                    zaxis_title='Volume (Trailing Mean - 30Min)',
                    aspectmode='cube'),
        scene_camera_eye=dict(x=2, y=-1.5, z=1.25),
    )
    return {"data": trace2, "layout": layout2}

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

推荐阅读