将 Y 轴的 0 值对齐 Plotly.js 中的容器中间

Question

玩Plotly.js，需要制作具有正值和负值的堆叠条形图，但是这样Y轴的0值将在容器中间对齐，我怎么能实现了吗？

这是我卡住的游乐场：https://codepen.io/anatoly314/pen/oNjopvR

现在我的布局如下，但是最好看一下我的代码笔示例以了解全貌。

const layout = {
        yaxis: {
          visible: true,
          constraintoward: 'center',
          showticklabels: false
        },
        xaxis: {
          visible: false
        },
        barmode: 'relative',
        showlegend: false,
        margin: {
          l: 0,
          r: 0,
          t: 0,
          b: 0
        },
        autosize: true,
        height: 200,
        width: 100,
        displayModeBar: false
      };

提前致谢

Answer 1

您必须手动设置 Y 轴范围。

const dataN = [trace1, trace2];
const dataP = [trace3, trace4];

const alldata = [...trace1.y, ...trace2.y, ...trace3.y, ...trace4.y];
const maxValue = Math.max(...alldata.map( e => Math.abs(e)));

var layout = {
   yaxis: {
      visible: true,
      constraintoward: 'center',
      showticklabels: false,
      range: [-maxValue,maxValue]
    },

Code pen fork

将 Y 轴的 0 值对齐 Plotly.js 中的容器中间

Align 0 value of Y-axis at the middle of container in Plotly.js

d3.js

plotly

plotly.js