使用dash和plotly画出sin函数随振幅、角频率、相位变化的关系

# 分析开仓的时间分布情况
import numpy as np
import pandas as pd
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import plotly.offline as py
import plotly.graph_objs as go
from plotly.subplots import make_subplots
import dash_bootstrap_components as dbc
markdown_text = '''
#### 图形说明
1. 分析正弦波曲线如何随着振幅、相位和角频率的变化而变化.
'''
app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)
app.layout = html.Div([
    # 类型选择
    html.Label('选择幅度大小',style = {'display': 'inline-block',"padding-right":"3%","padding-left":"3%","color":"blue"}),
    html.Div([
                dcc.Slider(
                    id='amplitude_value',
                    min=-20,
                    max=20,
                    step=1,
                    value=20,
                    marks={
                    i:str(i) for i in range(-20,21)}
                ),
            ]),
    html.Label('选择角频率大小',style = {'display': 'inline-block',"padding-right":"3%","padding-left":"3%","color":"blue"}),
    html.Div([
                dcc.Slider(
                    id='frequency_value',
                    min=1,
                    max=50*2*np.pi,
                    step=1,
                    value=40*2*np.pi,
                    marks={
                    i:str(i) for i in range(1,int(50*2*np.pi) ) if i%5==0 }
                ),
            ]),
    html.Label('选择相位大小',style = {'display': 'inline-block',"padding-right":"3%","padding-left":"3%","color":"blue"}),
    html.Div([
                dcc.Slider(
                    id='phase_value',
                    min=-np.pi,
                    max=np.pi,
                    step=0.1*np.pi,
                    value=-0.4*np.pi,
                    marks={
                    i:str(i) for i in range(int(-np.pi),int(np.pi))}
                ),
            ]),
    html.Div(id='slider-output-container'),
    dcc.Graph(id='indicator-graphic'), 
    # dcc.Markdown(children=markdown_text),
    # 图形主题类型
    html.Label('选择图形的主题',style = {'display': 'inline-block',"padding-right":"3%","padding-left":"3%","color":"blue"}),
    html.Div([
            dcc.Dropdown(
                id='style_value',
                options=[{'label': i, 'value': i} for i in ['ggplot2', 'seaborn', 'simple_white', 'plotly',
                                                'plotly_white', 'plotly_dark', 'presentation', 'xgridoff',
                                                'ygridoff', 'gridon', 'none']],
                value='plotly',
            ),
        ], style = {'display': 'inline-block',"width" : "10%"},),
    dcc.Markdown(children=markdown_text),
    ])
@app.callback(
    dash.dependencies.Output('slider-output-container', 'children'),
    [ 
    dash.dependencies.Input('amplitude_value', 'value'),
    dash.dependencies.Input("frequency_value" ,"value"), 
    dash.dependencies.Input("phase_value" ,"value"), 
     ])
def update_output(amplitude_value,frequency_value,phase_value):
    return f"您选择的幅度为:{amplitude_value}    ,    角频率为:{frequency_value}    ,    相位为:{phase_value}"
@app.callback(
    dash.dependencies.Output('indicator-graphic', 'figure'),
    [ 
    dash.dependencies.Input('amplitude_value', 'value'),
    dash.dependencies.Input("frequency_value" ,"value"), 
    dash.dependencies.Input("phase_value" ,"value"), 
    dash.dependencies.Input('style_value' ,"value"), 
     ])
def update_graph(amplitude_value,frequency_value,phase_value,style_value):
    x = 0.001*np.arange(1,1001)
    y = [amplitude_value*np.sin(frequency_value*i+phase_value) for i in x]
    # 根据data的数据画一个柱状图
    fig = go.Figure(data=go.Scatter(
                    x=x,
                    y=y,
                    mode = "lines+markers"
                    ))
    fig["layout"]["template"] = style_value
    fig["layout"]["height"] = 800
    return fig 
if __name__ == '__main__':
    app.run_server()