使用域属性并排绘制 3 个饼图

Question

我正在尝试并排绘制 3 个饼图。我不明白为什么下面的代码让饼图在页面上斜向左写而不是水平向左写在一行中。

这是我的代码：

app.layout = html.Div([
    html.Div([
        dcc.Graph(id='TPiePlot',
                  figure={
                      'data': [go.Pie(labels=labels1,
                                      values=values1,
                                      marker=dict(colors=colors, line=dict(color='#fff', width=1)),
                                      hoverinfo='label+value+percent', textinfo='value',
                                      domain={'x': [0, .25], 'y': [0, 1]}
                                      )
                               ],
                      'layout': go.Layout(title='T',
                                          autosize=True
                                          )
                  }
                  ),
        dcc.Graph(id='RPiePlot',
                  figure={
                      'data': [go.Pie(labels=labels2,
                                      values=values2,
                                      marker=dict(colors=colors, line=dict(color='#fff', width=1)),
                                      hoverinfo='label+value+percent', textinfo='value',
                                      domain={'x': [0.30, .55], 'y': [0, 1]}
                                      )
                               ],
                      'layout': go.Layout(title='R',
                                          autosize=True
                                          )
                  }
                  ),

        dcc.Graph(id='RoPiePlot', 
                  figure={
                      'data': [go.Pie(labels=labels3,
                                      values=values3,
                                      marker=dict(colors=colors, line=dict(color='#fff', width=1)),
                                      hoverinfo='label+value+percent', textinfo='value',
                                      domain={'x': [0.60, 0.85], 'y': [0, 1]}
                                      )
                               ],
                      'layout': go.Layout(title='Ro',
                                          autosize=True
                                          )
                  }
                  )
    ])
])

这是已接受答案中的选项 1 的情况（这是我需要遵循的答案）。我得到了三种不同的尺寸以及覆盖一些饼图的图例：

我很难理解如何使用 CSS 调整破折号图的大小，因为整个容器的大小增加了而不是实际的图，而且我不知道如何只针对图本身使尺寸变大。有没有解决的办法？

Answer 1

Plotly 的 domain 用于子图。在您的情况下，您将一个接一个地绘制三个单独的地块，并且为每个地块分别设置域。

您至少有两个选择：

使用您现在使用的方法，即 3 个单独的地块，并使用 CSS 定义它们的位置
用三个图形创建一个图并使用domain调整它们的位置。

选项 1

import dash
import flask
import dash_html_components as html
import plotly.graph_objs as go
import dash_core_components as dcc

server = flask.Flask('app')
app = dash.Dash('app', server=server,
                external_stylesheets=['https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'])

labels = [['monkeys', 'elephants'],
          ['birds', 'dinosaurs'],
          ['unicorns', 'giraffes']]

values = [[50, 40],
          [100, 10],
          [100, 20]]

data = []

for label, value in zip(labels, values):
    data.append(html.Div([dcc.Graph(figure={'data': [go.Pie(labels=label,
                                                            values=value,
                                                            hoverinfo='label+value+percent', textinfo='value'
                                                            )]})
                          ], className='col-sm-4'))

app.layout = html.Div(data, className='row')

app.run_server()

选项 2

import dash
import flask
import dash_html_components as html
import plotly.graph_objs as go
import dash_core_components as dcc

server = flask.Flask('app')
app = dash.Dash('app', server=server)

labels = [['monkeys', 'elephants'],
          ['birds', 'dinosaurs'],
          ['unicorns', 'giraffes']]

values = [[50, 40],
          [100, 10],
          [100, 20]]

data = []
x1 = 0
x2 = 0.25
for label, value in zip(labels, values):
    data.append(go.Pie(labels=label,
                       values=value,
                       hoverinfo='label+value+percent', textinfo='value',
                       domain={'x': [x1, x2], 'y': [0, 1]}
                                      )
                )
    x1 = x1 + 0.30
    x2 = x1 + 0.25



app.layout = html.Div([
    html.Div([dcc.Graph(figure={'data': data})])
])


app.run_server()

使用域属性并排绘制 3 个饼图

Plotting 3 pie charts side-by-side using the domain property

python

plotly

plotly-dash

使用域 属性 并排绘制 3 个饼图

Plotting 3 pie charts side-by-side using the domain property

python

plotly

plotly-dash

使用域属性并排绘制 3 个饼图