问如何在堆叠的水平条形图中将跟踪文本居中对齐
EN

Stack Overflow用户

提问于 2018-12-19 17:58:32

回答 3查看 2.2K关注 0票数 3

我有一个堆叠的水平条，我希望为每个轨迹定义的文本放置在相应条的中心。如果不使用anotations，我找不到一个属性来设置这个属性，但是我想为每个跟踪使用"text“，并且能够对齐它。

我在Jupyter上使用Plotly 3.4.1 (Plotly offline)。除了尝试使用注释之外，我找不到任何关于如何做到这一点的文档，如果我想精确定位一个明确的坐标，这看起来是一个更合适的解决方案。我想要的是一个简单得多的(类似"align"："center")，但是在go.Bar下找不到任何属性

只想让"80"，"20“出现在中心位置，而不是靠右对齐

from plotly.offline import iplot, plot, init_notebook_mode
import plotly.graph_objs as go

def getStackedSentimentHbar():
    trace0 = go.Bar(
        y=["A","B"],
        x=[20,80],
        orientation = 'h',
        text=["20","80"],
        textposition="inside",
        hoverinfo = "none",
    )
    trace1 = go.Bar(
        y=["A","B"],
        x=[80,20],
        orientation = 'h',
        text=["80","20"],
        textposition="inside",
        hoverinfo = "none",
    )
    data = [trace0,trace1]
    layout = go.Layout(
        barmode='stack',
        showlegend=False,
        xaxis=dict(
            showgrid=False,
            zeroline=False,
            showline=False,
            ticks='',
            showticklabels=False
        ),
        yaxis=dict(
            showgrid=False,
            zeroline=False,
            showline=False,
            ticks='',
            showticklabels=True
        ),
        margin = dict(
            l = 200, 
            r = 50, 
            b = 50, 
            t = 50, 
            pad = 10
        ),
        font=dict(
            family='Heebo', 
            size=18, 
            color='#000000'
        )
    )
    fig = go.Figure(data=data, layout=layout)
    return fig

init_notebook_mode()
fig = getStackedSentimentHbar()
iplot(fig)

python

plotly

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-12-20 11:32:00

据我所知，在Plotly中没有这样的参数，但我们可以随时修改为Plotly :)

让我们只复制所有的x和y值，但保留text的原样。

在下面的代码中有两个函数，getStackedSentimentHbar和getStackedSentimentHbarCentered。第一个返回原始图，第二个返回带有(几乎)居中标签的图。

from plotly.offline import iplot, plot, init_notebook_mode
import plotly.graph_objs as go

LAYOUT = go.Layout(
        barmode='stack',
        showlegend=False,
        xaxis=dict(
            showgrid=False,
            zeroline=False,
            showline=False,
            ticks='',
            showticklabels=False
        ),
        yaxis=dict(
            showgrid=False,
            zeroline=False,
            showline=False,
            ticks='',
            showticklabels=True
        ),
        margin = dict(
            l = 200, 
            r = 50, 
            b = 50, 
            t = 50, 
            pad = 10
        ),
        font=dict(
            family='Heebo', 
            size=18, 
            color='#000000'
        )
    )

def getStackedSentimentHbar(values):

    data = []
    for i, x in enumerate(values['x']):
        trace = go.Bar(
            x=x,
            y=values['y'][i],
            orientation='h',
            text=x,
            textposition='inside',
            hoverinfo = 'none',
        )
        data.append(trace)

    fig = go.Figure(data=data, layout=LAYOUT)
    return fig

def getStackedSentimentHbarCentered(values):

    data = []
    for i, x in enumerate(values['x']):

        trace = go.Bar(
            x=[int(i / 2) for i in x * 2],
            y=values['y'][i] * 2,
            orientation = 'h',
            text=x,
            textposition='inside',
            hoverinfo = 'none'
        )
        data.append(trace)

    fig = go.Figure(data=data, layout=LAYOUT)
    return fig

values = {'x': [[20, 80], [80, 20]],
          'y': [['A', 'B'], ['A', 'B']]}

init_notebook_mode()
fig = getStackedSentimentHbarCentered(values)
iplot(fig)

票数 1

Stack Overflow用户

发布于 2021-06-20 00:37:58

一种更好的方法--使用单独的注释。

var x1A = 20;
var x1B = 80;
var x2A = 80;
var x2B = 20;
var trace1 = {
  y: ['A', 'B'],
  x: [x1A, x1B],
  type: 'bar',
  orientation: 'h',
};

var trace2 = {
  y: ['A', 'B'],
  x: [x2A, x2B],
  type: 'bar',
  orientation: 'h',
};

var data = [trace1, trace2];

var layout = {
  barmode: 'stack',
  annotations: [
    { x: x1A / 2, y: 'A', text: '20', showarrow: false },
    { x: x1A + x2A / 2, y: 'A', text: '80', showarrow: false },
    { x: x1B / 2, y: 'B', text: '80', showarrow: false },
    { x: x1B + x2B / 2, y: 'B', text: '20', showarrow: false },
  ],
};

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

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.0.0.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>