在堆叠水平条形图中绘制未对齐的刻度标签

Question

在使用 base 堆叠水平条时，我无法让 yaxis 刻度标签正确对齐条（我的用例是时间轴视图，所以我需要在堆叠条之间留空 spaces ，因此我使用 base)

这是一个展示问题的代码笔：https://codepen.io/dan-wiegand/pen/GRMwKGP?editors=0010

var data = [{
  type: 'bar',
  x: [0, 10, 10, 0],
  base: [0, 10, 20, 30],
  y: ['trace 1', 'trace 1', 'trace 1', 'trace 1'],
  orientation: 'h'
}, {
  type: 'bar',
  x: [0, 10, 0, 10],
  base: [0, 10, 20, 30],
  y: ['trace 2', 'trace 2', 'trace 2', 'trace 2'],
  orientation: 'h'
}, {
  type: 'bar',
  x: [10, 0, 10, 0],
  base: [0, 10, 20, 30],
  y: ['trace 3', 'trace 3', 'trace 3', 'trace 3'],
  orientation: 'h'.   
}];
const layout = {
  yaxis: {
    showgrid: true
  }
};
Plotly.newPlot('myDiv', data, layout);
(code required to post codepen link)

对于那些熟悉 flex box 的人来说，它在视觉上就像 space-around 和 space-between 之间的区别（bars 是 space between 和 ticks 是 space左右)

我的问题如下所示这是我的实际情况——如果它们看起来都像“复制效价”，那将是完美的

我不在乎标签是沿着轴线还是在空 spaces 中，只要标签和条对齐即可！在一个完美的世界中，图表将像下面这样对齐，刻度标签在刻度之间的 space 和刻度之间的条形图

Answer 1

问题被标记为 python 和 javascript。 python 的解决方案，但跨语言的概念相同
对于每条轨迹使用单独的 yaxis y, y2, y3
在布局中设置每个yaxis的域

import plotly.graph_objects as go

data = [
    {
        "type": "bar",
        "x": [0, 10, 10, 0],
        "base": [0, 10, 20, 30],
        "y": ["trace 1", "trace 1", "trace 1", "trace 1"],
        "orientation": "h",
        "yaxis": "y",
    },
    {
        "type": "bar",
        "x": [0, 10, 0, 10],
        "base": [0, 10, 20, 30],
        "y": ["trace 2", "trace 2", "trace 2", "trace 2"],
        "orientation": "h",
        "yaxis": "y2",
    },
    {
        "type": "bar",
        "x": [10, 0, 10, 0],
        "base": [0, 10, 20, 30],
        "y": ["trace 3", "trace 3", "trace 3", "trace 3"],
        "orientation": "h",
        "yaxis": "y3",
    },
]

go.Figure(data).update_layout(
    {
        ax: {"showgrid": True, "domain": [i * 0.33, (i + 1) * 0.33]}
        for i, ax in enumerate(["yaxis", "yaxis2", "yaxis3"])
    }
)

在堆叠水平条形图中绘制未对齐的刻度标签

Plotly tick labels misaligned in stacked horizontal bar chart

reactjs

plotly

plotly.js