plotly - 如何在 dash 中提供动画 plotly 表达人物？

Question

我尝试在 dash 中显示来自plotly-exress 主页的这个示例。

import plotly.express as px
gapminder = px.data.gapminder()
px.scatter(gapminder, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country",
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])

像这样:

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

gapminder = px.data.gapminder()

dimensions = []

app = dash.Dash(
    __name__, external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"]
)

app.layout = html.Div(
    [
        html.H1("Gapminder data"),
        dcc.Graph(id="graph", style={"width": "75%", "display": "inline-block"}),
    ]
)

@app.callback(Output("graph", "figure"), [])
def make_figure():
    return px.scatter(gapminder, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
                      size="pop", color="continent", hover_name="country",
                      log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])


app.run_server(debug=True)

但是，只出现了一个空的数字。

Answer 1

编辑:您需要最新版本的 Dash 和 Dash 核心组件来渲染动画帧。

在这种情况下，这是因为您的回调永远不会触发，因为第二个参数是一个空列表(即它不依赖于任何输入)。

如果将图形内联到布局中，它将呈现:

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

gapminder = px.data.gapminder()

dimensions = []

app = dash.Dash(
    __name__, external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"]
)

app.layout = html.Div(
    [
        html.H1("Gapminder data"),
        dcc.Graph(id="graph", style={"width": "75%", "display": "inline-block"},
        figure=px.scatter(gapminder, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
                      size="pop", color="continent", hover_name="country",
                      log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])),
    ]
)


app.run_server(debug=True)

或者您可以连接回调以依赖于确实发生变化的输入，它将触发并填充图形:)