时间戳

首页 > 解决方案 > 按下按钮前显示 Highchart + Plotly dash 图表

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

问题描述

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

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)

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

谢谢，米拉

标签： javascripthighchartsplotly-dash

解决方案

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

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

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

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

推荐阅读