Plotly：使用多个轴的分组条形图

Question

当我在Layout中设置barmode='group'，同时trace2 = Bar(...,yaxis='y2')时，这会导致条形图被堆叠或覆盖而不是分组。如何在具有多个轴的情况下对条形图进行分组？

我查看了以下内容，但没有发现解决方法：

• 单个Y轴分组柱状图的示例可以在这里找到。
• 多个轴的情况也可以在这里找到解释，并且可以在这里获取有关y轴的参考信息。

- tozCSS

---

我有同样的问题，并且我测试了它在他们的Web编辑器中也是无法正常工作的，所以我填写了https://github.com/plotly/plotly.js/issues/78。不确定这是否仅适用于某些后端，但JS组件是唯一具有公共错误跟踪器的组件。 - iustin

Answer 1

我希望下面的代码，基于动物园示例，会很容易理解。但是你需要正确设置yaxis和offsetgroup参数在go.Bar()对象中，以及layout参数中的yaxis2参数在go.Figure()对象中。代码如下：

import plotly.graph_objects as go
animals = ['giraffes', 'orangutans', 'monkeys']

fig = go.Figure(
    data=[
        go.Bar(name='SF Zoo', x=animals, y=[200, 140, 210], yaxis='y', offsetgroup=1),
        go.Bar(name='LA Zoo', x=animals, y=[12, 18, 29], yaxis='y2', offsetgroup=2)
    ],
    layout={
        'yaxis': {'title': 'SF Zoo axis'},
        'yaxis2': {'title': 'LA Zoo axis', 'overlaying': 'y', 'side': 'right'}
    }
)

# Change the bar mode
fig.update_layout(barmode='group')
fig.show()

结果看起来像这样：

编辑

要制作一个水平条形图，请按照以下步骤进行：

import plotly.graph_objects as go
animals = ['giraffes', 'orangutans', 'monkeys']

fig = go.Figure(
    data=[
        go.Bar(name='SF Zoo', y=animals, x=[200, 140, 210], xaxis='x', offsetgroup=1, orientation='h'),
        go.Bar(name='LA Zoo', y=animals, x=[12, 18, 29], xaxis='x2', offsetgroup=2, orientation='h')
    ],
    layout={
        'xaxis': {'title': 'SF Zoo axis'},
        'xaxis2': {'title': 'LA Zoo axis', 'overlaying': 'x', 'side': 'top'}
    }
)

# Change the bar mode
fig.update_layout(barmode='group')
fig.show()

结果看起来像这样：

- Jaroslav Bezděk

---

怎样才能使它变成水平的？ - LoukasPap

@LoukasPap，我已经为你编辑了答案！<3 - Jaroslav Bezděk

Answer 2

对于现在看到这篇文章的人，plotly 现在在条形图中有一个 offsetgroup 属性来解决这个问题。设置 barmode='grouped' 仍然不起作用。

- abogaard

Answer 3

这是一个带有多个轴的分组条形图的示例：https://plot.ly/~etpinard/2080/grouped-bars-on-multiple-axes/ 相应的Python代码可以在此处找到：https://plot.ly/~etpinard/2080/grouped-bars-on-multiple-axes.py 希望这能有所帮助。

- etpinard

---

谢谢，但您这里有两个独立的图表。我想要一个在单一x轴上分组两条迹线的柱形图（类似于这里的zoo示例[https://plot.ly/python/bar-charts/]）；同时有两个y轴，一个在左侧，另一个在右侧，类似于第一个示例[https://plot.ly/python/multiple-axes/]。这可能吗？谢谢！ - tozCSS