图未保存在函数的 plotly-dash 中。我该如何解决？

Question

我有一个函数可以使用 matplotlib 绘图并使用 tls.matplotlib_to_pyplot 将其转换为 plotly 绘图。最后我把它命名为plotly_fig。现在我正在尝试将滑块添加到 dash webapp。但是当我编译它时，我得到一个错误，说 plotly_fig 没有定义。以下是重现错误的一些示例代码。

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
from numpy.linalg import matrix_power
import matplotlib.pyplot as plt
import plotly.tools as tls
from mpl_toolkits.mplot3d import Axes3D
from dash.dependencies import Input, Output
app = dash.Dash()
#begin with the knobs
app.layout = html.Div([
   dcc.Graph(
       id = 'graph',
       figure = plotly_fig),

   html.Label('Config L'), ## this is the knob for the length
   dcc.Slider(
       id = 'l',
       min = 5,
       max = 10,
       marks = {i: 'Label ={}'.format(i) if i == 1 else str(i) for i in range(5,10)},
       value = L,
   ),

   html.Label('Config n'), ##knob for the n-gon
   dcc.Slider(
       id = 'n',
       min = 0,
       max = 10,
       marks = {i: 'Label ={}'.format(i) if i == 1 else str(i) for i in range(1,10)},
       value = n,
   ),

   html.Label('Config N'),  ##knob for the number of n-gons outside initial
   dcc.Slider(
       id = 'N',
       min = 0,
       max = 10,
       marks = {i: 'Label ={}'.format(i) if i == 1 else str(i) for i in range(1,10)},
       value = N,
   ),

   html.Label('Config r'),  ##knob for r only works on integers for now
   dcc.Slider(
       id = 'r',
       min = 0,
       max = 2,
       marks = {i: 'Label ={}'.format(i) if i == 1 else str(i) for i in    range(1,2)},
       value = r,
   ),

   html.Label('Config d'), ##knoc for the depth of the dip
   dcc.Slider(
       id = 'd',
       min = 0,
       max = 2,
       marks = {i: 'Label ={}'.format(i) if i == 1 else str(i) for i in range(1,2)},
       value = d,
)
],
style = {'columnCount': 1})
@app.callback(
   dash.dependencies.Output('graph', 'figure'),
   [dash.dependencies.Input('l', 'value'),
   dash.dependencies.Input('n', 'value'),
   dash.dependencies.Input('N', 'value'),
   dash.dependencies.Input('r', 'value'),
   dash.dependencies.Input('d', 'value')])

def output(L,n,N,r,d):
    x = np.linspace(np.pi, L*n*N*r*d*np.pi, 1000)
    fig = plt.figure()
    ax = fig.add_subplot(111)
    ax.plot(x, sinx)
    plotly_fig = tls.mpl_to_plotly(mpl_fig)
    return{plotly_fig}
if __name__=='__main__':
    app.run_server(debug = True)

我做错了什么？

Answer 1

问题是当您试图在图表的 figure 字段中使用变量 plotly_fig 时甚至没有声明它。它只是在回调中本地声明。

无需显式设置Graph的figure 属性，回调时会自动映射，直接这样即可，

#your code here

app = dash.Dash()
#begin with the knobs
app.layout = html.Div([
   dcc.Graph(
       id = 'graph'),  # ==> here you can remove the figure as it will be automatically set during the callback.

    #your code here
],

style = {'columnCount': 1})

@app.callback(
   dash.dependencies.Output('graph', 'figure'), #here figure represents the field
   [dash.dependencies.Input('l', 'value'),
   dash.dependencies.Input('n', 'value'),
   dash.dependencies.Input('N', 'value'),
   dash.dependencies.Input('r', 'value'),
   dash.dependencies.Input('d', 'value')])

def output(L,n,N,r,d):
    #your code here
    plotly_fig = tls.mpl_to_plotly(mpl_fig)
    return{plotly_fig}

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

在上面的代码片段中，Slider 的 value 属性是应用程序的输入，应用程序的输出是 figure 属性图。每当 Slider 的值发生变化时，Dash 都会使用新的输入值调用回调函数 output。该函数使用这个新值过滤数据帧，构造一个图形对象，并将其 returns 发送到 Dash 应用程序。

同时，如果您希望在调用回调函数之前设置默认值，您可以将 plotly_fig 声明为这样的全局变量，

#your code here
plotly_fig = None # declare the default figure here

app = dash.Dash()
#begin with the knobs
app.layout = html.Div([
   dcc.Graph(
       id = 'graph', figure = plotly_fig),

    #your code here
],

style = {'columnCount': 1})

@app.callback(
   dash.dependencies.Output('graph', 'figure'),
   [dash.dependencies.Input('l', 'value'),
   dash.dependencies.Input('n', 'value'),
   dash.dependencies.Input('N', 'value'),
   dash.dependencies.Input('r', 'value'),
   dash.dependencies.Input('d', 'value')])

def output(L,n,N,r,d):
    #your code here
    plotly_fig = tls.mpl_to_plotly(mpl_fig)
    return{plotly_fig}

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

有关更多信息，请参阅具有类似示例的官方文档页面，

https://dash.plot.ly/getting-started-part-2

图未保存在函数的 plotly-dash 中。我该如何解决？

Figure is not being saved in plotly-dash out of a function. How do I fix this?

python

python-2.7

plotly

plotly-dash