按下按钮前显示的 Highchart + Plotly dash 图表

Question

我在 highchart 中嵌入了 plotly dash。我的要求是当我按下 Apply 按钮时应该显示图形。但是当我运行代码本身时，图形正在显示。

import dash
import dash_alternative_viz as dav
import dash_html_components as html
from dash.dependencies import Input, Output
import random

external_scripts = [
    "https://code.highcharts.com/highcharts.js",
    "http://code.highcharts.com/highcharts-more.js",
    "http://code.highcharts.com/maps/modules/map.js",
    "http://code.highcharts.com/maps/modules/data.js",
    "http://www.highcharts.com/samples/data/maps/world.js",
    "https://code.highcharts.com/modules/draggable-points.js"

]
app = dash.Dash(__name__,external_scripts=external_scripts)

app.layout = html.Div([
  html.Button(id="my_button", children="Apply!"),
  dav.HighChart(id="my_highchart")
])

@app.callback(
  Output("my_highchart", "options"), [Input("my_button", "n_clicks")])
  
def random_chart(n_clicks):

  return {
      'title': { 'text': 'Highcharts draggable demo' },
      'series': [{
        'data': [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,30.9, 41.5, 189, 162.2, 90.0, 45.0, 105.6, 136.5, 389.4, 500.1, 25.6, 69.4],
        'color':'white',
        'marker': {
                'fillColor': 'blue',
                  },
        'cursor': 'move',
          'dragDrop': {
            'draggableX': False,
            'draggableY': True
               }
    }]
  }
  
if __name__ == "__main__":
   app.run_server( port = 8052, debug=True)

我不确定可能是什么问题，有人可以帮助我吗？

谢谢，米拉

Answer 1

默认情况下，所有回调都在 Dash 初始化时执行。您可以通过 Dash 对象的 prevent_initial_callbacks 关键字参数绕过所有回调的此行为，

app = Dash(..., prevent_initial_callbacks=True)

或通过回调装饰器的 prevent_initial_call 关键字参数在每个回调的基础上，

@app.callback(Output(...), Input(...)], prevent_initial_call=True)

按下按钮前显示的 Highchart + Plotly dash 图表

Highchart + Plotly dash Graph displaying before pressing the button

javascript

highcharts

plotly-dash