嘿，这个需求很好实现！你只需要在dcc.Graph的figure的layout配置中添加hovermode参数，并将其设置为'closest'，就能把默认的“Compares data on hover”改成“Show closest data on hover”啦。

关键说明 #

• 默认的hovermode值是'compare'，也就是会同时显示同一x轴位置下所有系列的数据
• 当你设置hovermode: 'closest'后，悬停时只会显示鼠标指针最靠近的那个数据点的信息

修改后的完整代码 #

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='Hello New Other Change', ),
    html.Div(children='''
        Dash: A web application framework for Python.
    '''),
    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization',
                # 添加这一行来修改悬停模式
                'hovermode': 'closest'
            }
        }
    )
])

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

你运行修改后的代码，就能看到悬停时只显示单个数据点的信息了，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Sander van den Oord