更改悬停/单击时整个轨迹的颜色 [英] Change Color of an Entire Trace on Hover/Click in Plotly

问题描述

我以绘图的形式显示了当前图形(下面的jupyter笔记本代码)，并希望创建一种效果，当您将鼠标悬停或单击每条迹线时，整个迹线将以不同的颜色突出显示(在此示例中为红色).我尝试从SOF实施以下示例:如何突出显示整个跟踪在Plotly for Python中悬停了吗?没有运气.如果有人可以帮助，那将是惊人的.目前，每条痕迹仍为浅灰色.

I have the current figure in plotly (jupyter notebook code below), and was hoping to create the effect whereby when you hover or click over each trace, the whole trace is highlighted a different colour (in this example red). I tried implementing these examples from SOF: Plotly in Python: how to highlight a trace on hover? & How do I highlight an entire trace upon hover in Plotly for Python? with no luck. If anyone could help that would be amazing. Currently each trace remains lightgrey.

import plotly.graph_objects as go

teams_list = sorted(teams_list,key=str.lower)
default_linewidth = 2
highlighted_linewidth_delta = 2

fig = go.FigureWidget() 
f.layout.hovermode = 'closest'
f.layout.hoverdistance = -1 #ensures no "gaps" for selecting sparse data

for t in teams_list:
    fig.add_trace(go.Scatter(x=elo_all.index, 
                             y=elo_all[t],
                             name=t,
                             mode='lines',
                             text=elo_all['Round'], # hover text goes here
                             line={'width': default_linewidth, 'color':'lightgrey'}))

    
fig.update_layout(
    xaxis = dict(
        tickmode = 'array',
        tickvals = [0,29,58,87,117,146],
        ticktext = [2015,2016,2017,2018,2019,2020]
    )
)


# our custom event handler
def update_trace(trace, points, selector):
    # this list stores the points which were clicked on
    # in all but one event they it be empty
    if len(points.point_inds) > 0:
        for i in range( len(fig.data) ):
            fig.data[i]['line']['color'] = 'red'



# we need to add the on_click event to each trace separately       

for i in range(len(fig.data)):
    fig.data[i].on_hover(update_trace)

# show the plot
fig.show()

推荐答案

因此，事实证明这是一个两部分的问题:

So this was a problem in 2 parts as it turns out:

1. 对我来说，问题在于未正确启用窗口小部件扩展名(如我从执行jupyter nbextension列表中可以检查的那样，输出为空)，这就是为什么没有.show()时无花果无法渲染的原因，以及为什么on_click函数不起作用.您可以先检查jupyter nbextension列表来解决此问题，如果该列表为空，可以尝试使用conda env:

jupyter nbextension enable --py widgetsnbextension

1. 我将我的脚本固定在下面，可以很好地工作，可悲的是，我还没有gif的动作.

    import plotly.graph_objects as go
    
    teams_list = sorted(teams_list,key=str.lower)
    default_linewidth = 2
    highlighted_linewidth = 3
    
    fig = go.FigureWidget() # hover text goes here
    fig.layout.hovermode = 'closest'
    fig.layout.hoverdistance = -1 #ensures no "gaps" for selecting sparse data
    
    for t in teams_list:
        fig.add_trace(go.Scatter(x=elo_all.index, 
                                 y=elo_all[t],
                                 name=t,
                                 mode='lines',
                                 text=elo_all['Round'],
                                 opacity=0.3,
                                 line={'width': default_linewidth, 'color':'grey'}))
    
        
    fig.update_layout(
        xaxis = dict(
            tickmode = 'array',
            tickvals = [0,29,58,87,117,146],
            ticktext = [2015,2016,2017,2018,2019,2020]
        )
    )
    
    fig.update_yaxes(range=[1350, 1650])
    
    # our custom event handler
    def update_trace(trace, points, selector):
        if len(points.point_inds)==1:
            i = points.trace_index
            for x in range(0,len(fig.data)):
                fig.data[x]['line']['color'] = 'grey'
                fig.data[x]['opacity'] = 0.3
                fig.data[x]['line']['width'] = default_linewidth
            #print('Correct Index: {}',format(i))
            fig.data[i]['line']['color'] = 'red'
            fig.data[i]['opacity'] = 1
            fig.data[i]['line']['width'] = highlighted_linewidth
    
    # we need to add the on_click event to each trace separately       
    for x in range(0,len(fig.data)):
        fig.data[x].on_click(update_trace)
    
    # show the plot
    fig

这篇关于更改悬停/单击时整个轨迹的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！