使用domain属性并排绘制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用于子图。 在您的情况下，您要一个接一个地绘制三个单独的图，并且每个图都分别设置域。

您至少有两个选择：

1. 使用您现在使用的方法，即3个单独的图，并使用CSS定义其位置
2. 创建一个包含三个图形的绘图，并使用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()