Построение 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's 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()