Python 3.x 如何修复'；下拉菜单读取'；划破折号错误

我尝试重新创建以下示例，以实现web上显示的数据科学示例

我已经编写了以下代码，并对此进行了修改：

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

import pandas as pd
import plotly.graph_objs as go

# Step 1. Launch the application
app = dash.Dash()

# Step 2. Import the dataset
filepath = 'https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv'
st = pd.read_csv(filepath)


# range slider options
st['Date'] = pd.to_datetime(st.Date)
dates = ['2015-02-17', '2015-05-17', '2015-08-17', '2015-11-17',
         '2016-02-17', '2016-05-17', '2016-08-17', '2016-11-17', '2017-02-17']

features = st.columns[1:-1]
opts = [{'label' : i, 'value' : i} for i in features]

# Step 3. Create a plotly figure
trace_1 = go.Scatter(x = st.Date, y = st['AAPL.High'],
                    name = 'AAPL HIGH',
                    line = dict(width = 2,
                                color = 'rgb(229, 151, 50)'))
layout = go.Layout(title = 'Time Series Plot',
                   hovermode = 'closest')
fig = go.Figure(data = [trace_1], layout = layout)


# Step 4. Create a Dash layout
app.layout = html.Div([
                # a header and a paragraph
                html.Div([
                    html.H1("This is my first dashboard"),
                    html.P("Dash is so interesting!!")
                         ],
                     style = {'padding' : '50px' ,
                              'backgroundColor' : '#3aaab2'}),
                # adding a plot
                dcc.Graph(id = 'plot', figure = fig),
                # dropdown
                html.P([
                    html.Label("Choose a feature"),
                        dcc.Dropdown(
                                id='opt',                              
                                options=opts,
                                value=features[0],
                                multi=True

                                ),
                # range slider
                html.P([
                    html.Label("Time Period"),
                    dcc.RangeSlider(id = 'slider',
                                    marks = {i : dates[i] for i in range(0, 9)},
                                    min = 0,
                                    max = 8,
                                    value = [1, 7])
                        ], style = {'width' : '80%',
                                    'fontSize' : '20px',
                                    'padding-left' : '100px',
                                    'display': 'inline-block'})
                      ])
                        ])


# Step 5. Add callback functions
@app.callback(Output('plot', 'figure'),
             [Input('opt', 'value'),
             Input('slider', 'value')])
def update_figure(input1, input2):
    # filtering the data
    st2 = st[(st.Date > dates[input2[0]]) & (st.Date < dates[input2[1]])]
    # updating the plot
    trace_1 = go.Scatter(x = st2.Date, y = st2['AAPL.High'],
                        name = 'AAPL HIGH',
                        line = dict(width = 2,
                                    color = 'rgb(229, 151, 50)'))
    trace_2 = go.Scatter(x = st2.Date, y = st2[input1],
                        name = str(input1),
                        line = dict(width = 2,
                                    color = 'rgb(106, 181, 135)'))
    fig = go.Figure(data = [trace_1, trace_2], layout = layout)
    return fig

# Step 6. Add the server clause
if __name__ == '__main__':
    app.run_server(debug = True)

导入破折号
将仪表板核心组件作为dcc导入
将dash_html_组件导入为html
从dash.dependencies导入输入，输出
作为pd进口熊猫
导入plotly.graph_objs作为go
#第一步。启动应用程序
app=dash.dash（）
#第二步。导入数据集
文件路径=https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv'
st=pd.read\u csv（文件路径）
#范围滑块选项
st['Date']=pd.to_datetime（st.Date）
日期=['2015-02-17'、'2015-05-17'、'2015-08-17'、'2015-11-17'，
'2016-02-17', '2016-05-17', '2016-08-17', '2016-11-17', '2017-02-17']
特征=st.列[1:-1]
opts=[{'label'：i，'value'：i}表示特征中的i]
#第三步。创建绘图图形
跟踪1=去散点（x=第一个日期，y=第一个['AAPL.High']，
名称='AAPL高'，
线条=笔迹（宽度=2，
颜色='rgb（229151,50'））
布局=go.layout（标题=‘时间序列图’，
hovermode=‘最近’）
图=开始图（数据=[trace_1]，布局=布局）
#第四步。创建短划线布局
app.layout=html.Div([
#标题和段落
html.Div([
H1（“这是我的第一个仪表板”），
html.P（“Dash太有趣了！！”）
],
style={'padding'：'50px'，
“背景色”：“3aaab2”，
#添加绘图
dcc.图形（id=‘绘图’，图=图），
#下拉列表
html.P([
html.Label（“选择功能”），
dcc.下拉列表(
id='opt'，
选项=选项，
值=特征[0]，
多重=真
),
#范围滑块
html.P([
html.Label（“时间段”），
dcc.RangeSlaider（id='slider'，
marks={i:dates[i]表示范围（0,9）}，
最小值=0，
最大值=8，
值=[1,7]）
]，style={'width'：'80%，
“fontSize”：“20px”，
“左填充”：“100px”，
“显示”：“内联块”}）
])
])
#第五步。添加回调函数
@应用程序回调（输出（'plot'，'figure'），
[输入（'opt'，'value'），
输入（'滑块'，'值'）]）
def更新图（输入1、输入2）：
#过滤数据
st2=st[（st.Date>dates[input2[0]]）和（st.Date

当我更改要素输入时，它不会正确更新绘图，也不会在绘图中显示选定的要素

---

回调函数或第二个跟踪的图形初始化有问题。但我不知道问题出在哪里

因为您在回调中只提供了两个散布跟踪。从两者中，一个是静态的，用于

'AAPL.High'

。因此，您需要将下拉值限制为

Multi=False

仅为选择选项（如

'AAPL.LOW'

）生成有效的绘图，而其他选项（如

dic

）不会显示第二条轨迹。如果保持

multi=True

，则回调不会终止。如果始终只选择了一个选项，则回调仍会工作。当您选择两个或多个选项时，脚本将失败，因为它将尝试在此处为数据返回块查找错误数据：

trace_2 = go.Scatter(x = st2.Date, y = st2[**MULTIINPUT**],
                        name = str(input1),
                        line = dict(width = 2,
                                    color = 'rgb(106, 181, 135)'))

在多输入时只允许传递一个列id。如果要引入更多跟踪，请使用for循环

将代码更改为以下内容：

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

import pandas as pd
import plotly.graph_objs as go

# Step 1. Launch the application
app = dash.Dash()

# Step 2. Import the dataset
filepath = 'https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv'
st = pd.read_csv(filepath)


# range slider options
st['Date'] = pd.to_datetime(st.Date)
dates = ['2015-02-17', '2015-05-17', '2015-08-17', '2015-11-17',
         '2016-02-17', '2016-05-17', '2016-08-17', '2016-11-17', '2017-02-17']

features = st.columns

opts = [{'label' : i, 'value' : i} for i in features]

# Step 3. Create a plotly figure
trace_1 = go.Scatter(x = st.Date, y = st['AAPL.High'],
                    name = 'AAPL HIGH',
                    line = dict(width = 2,
                                color = 'rgb(229, 151, 50)'))
layout = go.Layout(title = 'Time Series Plot',
                   hovermode = 'closest')
fig = go.Figure(data = [trace_1], layout = layout)


# Step 4. Create a Dash layout
app.layout = html.Div([
                # a header and a paragraph
                html.Div([
                    html.H1("This is a Test Dashboard"),
                    html.P("Dash is great!!")
                         ],
                     style = {'padding' : '50px' ,
                              'backgroundColor' : '#3aaab2'}),
                # adding a plot
                dcc.Graph(id = 'plot', figure = fig),
                # dropdown
                html.P([
                    html.Label("Choose a feature"),
                        dcc.Dropdown(
                                id='opt',
                                options=opts,
                                value=features[0],
                                multi=False

                                ),
                # range slider
                html.P([
                    html.Label("Time Period"),
                    dcc.RangeSlider(id = 'slider',
                                    marks = {i : dates[i] for i in range(0, 9)},
                                    min = 0,
                                    max = 8,
                                    value = [1, 7])
                        ], style = {'width' : '80%',
                                    'fontSize' : '20px',
                                    'padding-left' : '100px',
                                    'display': 'inline-block'})
                      ])
                        ])


# Step 5. Add callback functions
@app.callback(Output('plot', 'figure'),
             [Input('opt', 'value'),
             Input('slider', 'value')])
def update_figure(input1, input2):
    # filtering the data
    st2 = st#[(st.Date > dates[input2[0]]) & (st.Date < dates[input2[1]])]
    # updating the plot
    trace_1 = go.Scatter(x = st2.Date, y = st2['AAPL.High'],
                        name = 'AAPL HIGH',
                        line = dict(width = 2,
                                    color = 'rgb(229, 151, 50)'))
    trace_2 = go.Scatter(x = st2.Date, y = st2[input1],
                        name = str(input1),
                        line = dict(width = 2,
                                    color = 'rgb(106, 181, 135)'))
    fig = go.Figure(data = [trace_1, trace_2], layout = layout)
    return fig

# Step 6. Add the server clause
if __name__ == '__main__':
    app.run_server(debug = True)

导入破折号
将仪表板核心组件作为dcc导入
将dash_html_组件导入为html
从dash.dependencies导入输入，输出
作为pd进口熊猫
导入plotly.graph_objs作为go
#第一步。启动应用程序
app=dash.dash（）
#第二步。导入数据集
文件路径=https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv'
st=pd.read\u csv（文件路径）
#范围滑块选项
st['Date']=pd.to_datetime（st.Date）
日期=['2015-02-17'、'2015-05-17'、'2015-08-17'、'2015-11-17'，
'2016-02-17', '2016-05-17', '2016-08-17', '2016-11-17', '2017-02-17']
特征=st列
opts=[{'label'：i，'value'：i}表示特征中的i]
#第三步。创建绘图图形
跟踪1=去散点（x=第一个日期，y=第一个['AAPL.High']，
名称='AAPL高'，
线条=笔迹（宽度=2，
颜色='rgb（229151,50'））
布局=go.layout（标题=‘时间序列图’，
hovermode=‘最近’）
图=开始图（数据=[trace_1]，布局=布局）
#第四步。创建短划线布局
app.layout=html.Div([
#标题和段落
html.Div([