如何用ipywidgets复刻Plotly原生图例的条目图形样式？

要实现和Plotly原生图例一致的条目样式（包含线条颜色、线型、标记符号），可以用以下两种方案：

方案1：迷你Plotly小图（完美匹配原生样式） #

直接为每个轨迹生成一个极小的FigureWidget，只渲染对应的线条和标记，再和复选框、名称标签组合。这种方法能1:1还原Plotly的渲染效果，支持所有复杂样式（比如自定义线型、特殊标记）。

修改后的完整代码 #

import ipywidgets as widgets
from ipywidgets import interactive, fixed
import plotly.graph_objects as go

line = {'name': 'line','data': ((1,1), (2,2), (3,3)), 'color':'red', 'dash':'solid', 'symbol':'circle'}
square = {'name': 'square','data': ((1,1), (2,4), (3,9)), 'color':'blue', 'dash':'dash', 'symbol':'square'}
traces = (line, square)

def get_values(func, index):
    return [e[index] for e in func['data']]

def toggle_highlight(highlight, fig, index):
    new_width = 4 if highlight else 2
    fig.data[index].line.width = new_width

fig = go.FigureWidget()
legend_items = []    

for i, t in enumerate(traces):
    highlight_chk = interactive(toggle_highlight, highlight=False, fig=fixed(fig), index=fixed(i)).children[0]
    
    # 生成迷你图例图标：只显示线条和标记，隐藏坐标轴和背景
    mini_fig = go.FigureWidget(
        data=[go.Scatter(
            x=[0, 1], y=[0, 0],  # 绘制水平基线
            line=dict(width=2, color=t['color'], dash=t['dash']),
            marker=dict(symbol=t['symbol'], size=8, color=t['color']),
            showlegend=False
        )],
        layout=go.Layout(
            width=60, height=20,
            margin=dict(l=0, r=0, t=0, b=0),
            xaxis=dict(visible=False),
            yaxis=dict(visible=False),
            plot_bgcolor='rgba(0,0,0,0)',
            paper_bgcolor='rgba(0,0,0,0)'
        )
    )
    
    # 组合迷你图、名称标签和复选框
    item = widgets.HBox([mini_fig, widgets.Label(value=t['name']), highlight_chk])
    s = go.Scatter(name=t['name'], x=get_values(t, 0), y=get_values(t, 1), 
                   line=dict(width=2, color=t['color'], dash=t['dash']), 
                   marker=dict(symbol=t['symbol']), customdata=[{'index':i}])
    fig.add_trace(s)    
    legend_items.append(item)
    
legend = widgets.VBox(legend_items)
display(legend)
display(fig)

方案2：HTML/CSS绘制（轻量无额外Plotly实例） #

如果不想创建多个小Plotly图，可以用HTML组件通过CSS模拟线条和标记样式。这种方法更轻量，但需要手动映射Plotly的样式参数到CSS属性。

核心代码片段 #

在循环中替换原来的Label部分：

# 根据Plotly样式生成对应的HTML/CSS
dash_style = "none" if t['dash'] == 'solid' else "linear-gradient(to right, transparent 50%, currentColor 50%)"
marker_symbol = '●' if t['symbol'] == 'circle' else '■'  # 可扩展更多符号映射

legend_html = f"""
<div style="display: flex; align-items: center; gap: 8px; height: 20px;">
    <!-- 线条 -->
    <div style="width: 40px; height: 2px; background-color: {t['color']};
                background-image: {dash_style}; background-size: 8px 2px;"></div>
    <!-- 标记 -->
    <span style="color: {t['color']}; font-size: 16px;">{marker_symbol}</span>
    <!-- 名称 -->
    <span>{t['name']}</span>
</div>
"""
legend_label = widgets.HTML(value=legend_html)
item = widgets.HBox([legend_label, highlight_chk])

注意事项 #

• 线型（dash）需要手动映射到CSS的背景渐变样式，比如dash对应短划线，dot对应点线，需要调整background-size参数。
• 标记符号（symbol）可以通过Unicode字符或CSS形状模拟，对于特殊标记可能需要额外处理。

内容的提问来源于stack exchange，提问作者nPn