Python 通过在短划线中高亮显示所选内容放大两个图形

我试图使这两个图形响应，这样，如果我突出显示一个选择并放大其中一个，另一个图形将在相同的日期放大

例如，在我发布的第一张图片中，如果我在1月份放大一个图表，我希望另一个图表也在相同的日期范围放大

你可以在我所附的图片中看到我想要做什么

有人能帮我吗

import dash
import dash_core_components as dcc
import dash_html_components as html
import ssl
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

ssl._create_default_https_context = ssl._create_unverified_context


df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='graph1',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),

    html.Div(children='Displaying Apple High and Low.', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

    dcc.Graph(
        id='example-graph-2',
        figure={
            'data': [
                {'y': df['AAPL.Open'], 'x': df['Date'], 'type': 'line', 'name': 'Activity'},
                {'y': df['AAPL.High'], 'x': df['Date'], 'type': 'line', 'name': 'Baseline'},
            ],
            'layout': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                }
            }
        }
    ),

    html.Div(children='Second Graph (Volume).', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

    dcc.Graph(
        id='graph2',
        figure={
            'data': [
                {'y': df['AAPL.Volume'], 'x': df['Date'], 'type': 'bar', 'name': 'Volume'},
            ],
            'layout': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                }
            }
        }
    ),


])



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

---

我对您的代码做了以下更改：

• 使用plotly.graph\u对象从另一个图形中重新选择所触发的回调中配置了两个图形。在graph1上执行的每次重新调整都会触发graph2配置，反之亦然
• 重新播放数据以

  dict

  的形式出现，我必须将其键转换为

  str

  才能访问其值
• 根据一个图形的松弛数据，使用

  update\u xaxes

  正确配置另一个图形的x轴范围

现在，基于一个图形中的x轴范围选择，另一个图形将自动上移。我在图2下面添加了一个降价项，这样您就可以跟踪Relayat data dict及其值

导入破折号
将仪表板核心组件作为dcc导入
将dash_html_组件导入为html
导入plotly.graph_对象作为go
导入ssl
作为pd进口熊猫
从dash.dependencies导入输入，输出
外部_样式表=['https://codepen.io/chriddyp/pen/bWLwgP.css']
ssl.\u创建\u默认\u https\u上下文=ssl.\u创建\u未验证\u上下文
颜色={'background'：'#111111'，
“文本”：“7FDBFF”}
df=pd.read_csv（“https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
app=dash.dash（名称，外部样式表=外部样式表）
#为图形1设置df1
df1=df[['Date'，'AAPL.Open'，'AAPL.High']]
df1.columns=[“日期”、“活动”、“基线”]
#为图形2设置df2
df2=df[['Date'，'AAPL.Volume']]
df2.columns=['Date'，'Volume']
#应用程序布局
app.layout=html.Div（style={'backgroundColor'：colors['background']}，
孩子们=[
html.H1（children='graph1'，
样式={'textAlign'：'center'，
“颜色”：颜色['text']}），
Div（children='Apple High and Low'.'，
样式={'textAlign'：'center'，
“颜色”：颜色['text']}），
dcc.Graph（id='graph1'），
Div（children='Second Graph（Volume）。'，
样式={'textAlign'：'center'，
“颜色”：颜色['text']}），
dcc.Graph（id='graph2'），
#跟踪x轴重新调整数据的项目
dcc.Markdown（id='轴数据'），
])
@app.callback(
输出（'graph2'，'figure'），
输入（'graph1'，'relaytdata'））
def RELAOUT_图形2（xaxis_配置）：
图2=go.Figure（）
图2.添加跟踪（go.Scatter（x=df2.Date，y=df2.Volume，name='Volume'））
图2.更新布局（plot\u bgcolor=colors['background']，
纸张颜色=颜色[“背景”]，
font_color=颜色['text']，
showlegend=True）
如果不是xaxis_配置：
通过
其他：
#出于某种原因，有必要将RELAOUT dict键转换为字符串
keys\u values=xaxis\u config.items（）
xaxis={str（key）：key的值，key中的值_值}
尝试：
如果xaxis.keys（）中的“自动调整大小”：
通过
xaxis.keys（）中的elif'xaxis.autorange'：
图2.update_xaxes（autorange=True）
其他：
图2.update_xaxes（范围=[xaxis['xaxis.range[0]']，xaxis['xaxis.range[1]']））
除：
通过
返回图2
@app.callback(
输出（'graph1'，'figure'），
输入（'graph2'，'relaytdata'））
def RELAOUT_图1（xaxis_配置）：
图1=go.Figure（）
图1.添加跟踪（go.Scatter（x=df1.Date，y=df1.Activity，name='Activity'））
图1.添加跟踪（go.Scatter（x=df1.Date，y=df1.Baseline，name='Baseline'））
图1.更新布局（绘图颜色=颜色['background']，
纸张颜色=颜色[“背景”]，
font_color=颜色['text']）
如果不是xaxis_配置：
通过
其他：
#出于某种原因，有必要将RELAOUT dict键转换为字符串
keys\u values=xaxis\u config.items（）
xaxis={str（key）：key的值，key中的值_值}
尝试：
如果xaxis.keys（）中的“自动调整大小”：
通过
xaxis.keys（）中的elif'xaxis.autorange'：
图1.update_xaxes（autorange=True）
其他：
图1.更新_xaxes（范围=[xaxis['xaxis.range[0]']，xaxis['xaxis.range[1]']））
除：
通过
返回图1
@app.callback(
输出（'axis_data'，'children'），
[输入（'graph1'，'relaytdata'），
输入（'graph2'，'relayoutData'）]）
def read_relayout（数据1、数据2）：
返回str（数据1）+'//'+str（数据2）
如果uuuu name uuuuuu='\uuuuuuu main\uuuuuuu'：
app.run_服务器（debug=True，port=8888）