Plotly.js子图堆叠垂直柱状图语法问题求助

问题根源 #

你添加的trace3存在两个核心错误：

• 错误使用orientation: 'h'水平柱状，与左侧需要的垂直堆叠柱状逻辑冲突
• 指定了未在布局中定义的x3/y3轴，导致Plotly无法识别子图配置，直接将所有trace合并到同一画布

修正方案 #

1. 调整trace3配置 #

将trace3改为垂直柱状，关联到左侧子图轴，并开启堆叠分组：

var trace3 = {
    x: ["2023.06", "2023.04", "2023.05", "2023.01", "2023.03", "2023.02", "2022.12"],
    y: [2, 3, 5, 3, 2, 1, 0], // 垂直柱状需x为类别、y为数值，与水平柱状轴映射相反
    name: 'Returns',
    orientation: 'v', // 改为垂直方向
    type: 'bar',
    xaxis: 'x1', // 关联左侧子图x轴
    yaxis: 'y1', // 关联左侧子图y轴
    stackgroup: '1' // 与trace1归入同一堆叠组
}

2. 确认数据与子图轴关联 #

确保trace2关联到右侧子图的x2/y2轴（原代码需已配置），数据数组顺序可按子图分组：

var data = [trace1, trace3, trace2];

3. 验证布局的子图配置 #

确保布局中正确定义双轴子图，示例配置如下：

var layout = {
    grid: {
        rows: 1,
        columns: 2,
        pattern: 'independent'
    },
    xaxis: {
        domain: [0, 0.7], // 左侧子图宽度占比
        title: '月份'
    },
    xaxis2: {
        domain: [0.75, 1], // 右侧子图宽度占比
        title: '平均价格'
    },
    yaxis: {
        title: '商品数量'
    },
    yaxis2: {
        anchor: 'x2',
        title: '月份'
    },
    barmode: 'stack' // 全局开启堆叠模式，或通过stackgroup单独控制
};

关键注意事项 #

• 垂直堆叠柱状图的轴映射需符合x=类别、y=数值的逻辑，与水平柱状相反
• 子图的轴必须在布局中提前定义，不能使用未配置的轴标识
• 堆叠效果可通过stackgroup指定分组，或全局设置barmode: 'stack'实现

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