如何修正Treemap颜色映射：实现负值红色、正值绿色

你编写的Plotly Treemap代码期望实现负值红色、正值绿色的双色刻度，但当前可视化中负值未正确显示红色，问题出在颜色刻度的生成逻辑和Treemap的路径设置上，以下是修正方案：

关键问题分析 #

1. 原set_colorscale函数的分界点计算错误，没有以0作为正负值的明确分界，导致颜色映射混乱；
2. Treemap的path参数包含percentage字段，生成了不必要的层级，干扰颜色映射；
3. hover信息设置错误，无法正确显示百分比数据。

修正后的完整代码 #

import pandas as pd
import numpy as np
import plotly.express as px

data = pd.DataFrame(
    {
        "Timestamp":['14-02-2022']*48,
        "Name":['Binance','OKX','Kucoin','Houbi','FTX','Bitfinex','Bitmex','Bittrex','CoinList','BNB_US','MEXC','Crypto','Gate','Bitstamp','FTX_US','Coinbase']*3,
        "Stablecoin":['USDT']*16 + ['USDC']*16 + ['BUSD']*16,
        "Value_USDT":[7.44,6.54,5.45,3,2,1.45,3,2,1,3,2,1,1,2,1,2,
                      7,6,5,3,2,1,3,2,1,3,2,1,1,2,1,2,
                      10.08,0,5,0,7,0,0,0,0,3,2,1,4,0,0,2],
        'percentage':[7.87,6.78,-5.08,-0.9,2.87,1.87,-3.78,2.87,1.6,3.67,-2.4,1.43,1.34,2.23,1.34,2.43,
                      7.78,6.43,5.43,3.45,2,1,3,2,-1.98,3,2,-1.76,1,2,1,2,
                      10.08,0.09,-5,0.07,7,0.76,0.67,0.87,0.56,-3,2,-1.65,4,0.56,0.65,2]
    }
)
data['all'] = 'all'

# 简化颜色刻度生成：以0为分界，负值红色、0附近灰色、正值绿色
pl_colorscale = [
    [0, "#DC3714"],   # 最小值到0用红色
    [0.5, "#C0C0C0"], # 0点用灰色过渡
    [0.5, "#19BD1B"], # 0到最大值用绿色
    [1, "#19BD1B"]
]

fig = px.treemap(data, path=['all','Stablecoin','Name'], values='Value_USDT')
fig.update_traces(
    textinfo="label",
    textposition="middle center",
    hovertemplate='交易所：%{label}<br>USDT价值：%{value}<br>百分比：%{customdata}<extra></extra>',
    customdata=data['percentage']  # 传递百分比数据到hover面板
)
fig.update_traces(marker=dict(
    colors=data['percentage'],
    colorscale=pl_colorscale,
    showscale=True,
    cmid=0  # 明确颜色刻度以0为中心，保证正负值颜色映射准确
))
fig.update_layout(width=1400, height=550, title="稳定币Treemap可视化")
fig.show()

核心修改点说明 #

1. 简化颜色刻度：直接定义以0为分界的颜色刻度，避免原函数复杂且错误的计算逻辑，确保负值区间映射红色，正值区间映射绿色，0点用灰色过渡；
2. 修正Treemap路径：移除path中的percentage字段，避免生成多余层级，让Treemap结构更清晰；
3. 修复hover信息：通过customdata传递百分比数据，在hovertemplate中正确展示所有需要的信息；
4. 添加cmid参数：设置cmid=0强制颜色刻度以0为中心，彻底解决正负值颜色映射错位的问题。

内容的提问来源于stack exchange，提问作者Đỗ Văn Thắng