在Plotly图表中绘制直方图区间矩形的问题求助

我尝试在Plotly图表中绘制直方图的区间矩形，要求矩形为绿色，且透明度根据relative_frequency调整（值越高颜色越深），但运行代码后图表出现异常，请求帮忙排查。

数据示例 #

hist_df.head()

low         high     counts relative_frequency
18122.98    18322.98    20  0.010199
19722.98    19922.98    22  0.011219
19922.98    20122.98    21  0.010709
20122.98    20322.98    21  0.010709
20322.98    20522.98    27  0.013768

原始代码 #

import plotly.express as px
import plotly.graph_objects as go
import numpy as np

# 定义不同深浅的绿色系颜色
colors = px.colors.sequential.Greens[::-1]

fig = go.Figure()

# 添加原始折线图
fig.add_trace(go.Scatter(x=df.index, y=df['Close']))

# 遍历直方图区间，根据相对频率填充区域颜色
for i, row in hist_df.iterrows():
    color_idx = int(row['relative_frequency'] * (len(colors) - 1))
    color = colors[color_idx]
    fig.add_shape(type='rect',
                  x0=row['low'], y0=0,
                  x1=row['high'], y1=1,
                  fillcolor=color,
                  line=dict(width=0))

fig.update_layout(xaxis_title='日期', yaxis_title='价格')
fig.update_xaxes(rangeslider_visible=True)

fig.show(config={'scrollZoom': True})

图表状态 #

• 原图表：正常显示的价格折线图
• 异常图表：添加矩形后显示范围错乱、无预期效果的图表

问题排查与修复 #

核心问题 #

1. 坐标轴映射完全错误：hist_df中的low/high是价格区间，对应折线图的Y轴，但你把它设为了矩形的X轴坐标；同时Y轴用0/1的相对值却未指定参考系，导致矩形被渲染到完全错误的位置，直接打乱图表显示范围。
2. 颜色逻辑不符合需求：用颜色索引切换绿色深浅无法实现“透明度随频率变化”的效果，且原始relative_frequency值过小（均小于0.02），会导致所有矩形的颜色索引都为0，颜色完全一致。

修复后的代码 #

import plotly.express as px
import plotly.graph_objects as go
import numpy as np

fig = go.Figure()

# 添加原始折线图
fig.add_trace(go.Scatter(x=df.index, y=df['Close'], name='收盘价'))

# 遍历直方图区间，绘制对应价格区间的背景矩形
for _, row in hist_df.iterrows():
    # 放大相对频率值提升透明度差异（原始值过小，直接用的话几乎全透明）
    opacity = min(row['relative_frequency'] * 10, 1)
    fig.add_shape(type='rect',
                  x0=df.index.min(), y0=row['low'],  # X轴覆盖全部日期范围
                  x1=df.index.max(), y1=row['high'],  # Y轴对应价格区间
                  fillcolor='rgba(0, 180, 0, {})'.format(opacity),  # 固定绿色，用opacity控制透明度
                  line=dict(width=0),
                  xref='x',  # 指定X轴为日期轴
                  yref='y')  # 指定Y轴为价格轴

fig.update_layout(xaxis_title='日期', yaxis_title='价格')
fig.update_xaxes(rangeslider_visible=True)

fig.show(config={'scrollZoom': True})

关键修复点 #

• 修正坐标轴映射：矩形X轴覆盖全部日期范围，Y轴对应价格区间，与折线图坐标轴逻辑匹配。
• 调整透明度逻辑：使用rgba颜色模式固定绿色，直接用放大后的relative_frequency控制透明度，频率越高颜色越深（不透明度越高）。
• 避免无效颜色索引：放弃颜色列表切换，改用透明度参数精准实现需求。

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