Plotly.js 热图着色问题：获取灰色而不是白色

问：

我正在编写在 JavaScript 中生成绘图热图的代码。我面临的问题是，对于 log2FoldChange 值介于 -0.1、0.1 范围内的数据，显示的颜色是灰色阴影，而不是我用 #FFFFFF 定义的白色。以下是我的代码：

// Create heatmap data
let heatmap_data = [{
    z: total_L2FC,
    x: indiv_name_list,
    y: gene_list,
    type: 'heatmap',
    hovertemplate: 'Gene: %{y}<br>Individual: %{x}<br>log2FoldChange: %{z}<br>p-adj: %{customdata}<extra></extra>',
    customdata: total_padj,
    zmin: -4,
    zmax: 4,
    colorscale: [
        [-4, '#000A63'],
        [-3, '#000A63'],
        [-3, '#000D84'],
        [-2.67, '#000D84'],
        [-2.67, '#1C2892'],
        [-2.33, '#1C2892'],
        [-2.33, '#39439F'],
        [-2, '#39439F'],
        [-2, '#555EAD'],
        [-1.67, '#555EAD'],
        [-1.67, '#7179BB'],
        [-1.33, '#7179BB'],
        [-1.33, '#8E93C8'],
        [-1, '#8E93C8'],
        [-1, '#AAAED6'],
        [-0.67, '#AAAED6'],
        [-0.67, '#C6C9E4'],
        [-0.33, '#C6C9E4'],
        [-0.33, '#E3E4F1'],
        [-0.10, '#E3E4F1'],
        [-0.10, '#FFFFFF'],
        [0.10, '#FFFFFF'],
        [0.10, '#F6E3E3'],
        [0.33, '#F6E3E3'],
        [0.33, '#EDC7C6'],
        [0.67, '#EDC7C6'],
        [0.67, '#E4ABAA'],
        [1, '#E4ABAA'],
        [1, '#DB8F8E'],
        [1.33, '#DB8F8E'],
        [1.33, '#D37371'],
        [1.67, '#D37371'],
        [1.67, '#CA5755'],
        [2, '#CA5755'],
        [2, '#C13B39'],
        [2.33, '#C13B39'],
        [2.33, '#B81F1C'],
        [2.67, '#B81F1C'],
        [2.67, '#AF0300'],
        [3, '#AF0300'],
        [4, '#970300'],
    ],
    
    autocolorscale: false,
    hoverongaps: false,
    xaxis: {
        tickangle: 45
    },
    yaxis: {
        autorange: true
    },
    colorbar: {
        title: {
            text: 'log<sub>2</sub>FC',
            font: {
                size: 14
            }
        }
    },
    showscale: true,
}];

let layout = {
    height: fig1_height,
    width: fig1_width,
    xaxis: {
        title: {
            text: 'Individual',
            font: {
                size: 14
            }
        }
    },
    yaxis: {
        title: {
            text: 'Gene',
            font: {
                size: 14
            }
        }
    }
};

console.log('fig1_width:', fig1_width);

// Resolve the Promise with the generated heatmap data and layout
resolve({ heatmap_data, layout, fig1_title });

我尝试从热图离散色标的绘图文档以及一般的热图页面中调整所有设置。

我还尝试颠倒定义色阶的顺序，将它们更改为 rgb 而不是十六进制，并将 zmin-zmax 更改为在色标范围内和色标范围之外。

请帮忙。我已经解决了这个问题将近一个星期，但我一辈子都无法弄清楚出了什么问题。