Plotly.js堆叠柱状图重叠渲染问题求助

你的堆叠柱状图出现重叠、hover切换显示的问题，核心原因是使用的Plotly.js版本（2.12.1）存在堆叠逻辑的bug，同时可以通过以下步骤彻底解决：

解决步骤 #

• 升级Plotly.js版本：旧版本对包含正负值的多轨迹堆叠支持存在问题，更换为较新版本即可修复。
• 确保barmode配置正确：保持layout.barmode = 'stack'（或'relative'，两者对正负值堆叠的处理逻辑一致）。
• 可选：显式指定x轴类型：由于x轴是年月分类，显式设置为分类轴可避免自动解析异常。

修改后的代码 #

HTML部分 #

<head>
    <!-- 使用最新稳定版Plotly.js -->
    <script src='https://cdn.plot.ly/plotly-4.24.3.min.js'></script>
</head>

<body>
    <div id='myDiv'></div>
</body>

JavaScript部分 #

var data = [
  {
    "x": ["Apr-2022", "May-2022", "Jun-2022", "Jul-2022", "Aug-2022"],
    "y": [1338.84, 1258.28, 0, 1331.68, 1331.68],
    "type": "bar",
    "name": "Wood"
  },
  {
    "x": ["Apr-2022", "May-2022", "Jun-2022", "Jul-2022", "Aug-2022"],
    "y": [-416.67, -416.67, 0, 0, -416.67],
    "type": "bar",
    "name": "Vegetables"
  },
  {
    "x": ["Apr-2022", "May-2022", "Jun-2022", "Jul-2022", "Aug-2022"],
    "y": [-1116, -2220.75, 0, -200, 0],
    "type": "bar",
    "name": "Steel Waste"
  },
  {
    "x": ["Apr-2022", "May-2022", "Jun-2022", "Jul-2022", "Aug-2022"],
    "y": [-505.04, 2910.9, 0, 0, 0],
    "type": "bar",
    "name": "Starch"
  },
  {
    "x": ["Apr-2022", "May-2022", "Jun-2022", "Jul-2022", "Aug-2022"],
    "y": [10596.16, 11112.87, 0, 10258.64, 11540.97],
    "type": "bar",
    "name": "Polythene"
  }
];

var layout = {
  barmode: 'stack',
  xaxis: { type: 'category' } // 显式指定分类轴，可选但更稳妥
};

Plotly.newPlot('myDiv', data, layout);

说明 #

升级版本后，Plotly会正确处理正负值的堆叠逻辑：所有正值轨迹向上堆叠，负值轨迹向下堆叠，同一x轴位置的柱子不会再重叠，hover时也能正确显示对应轨迹的信息。

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