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

问题描述：

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

I am trying to plot 3 pie charts side by side. I don't understand why the following code is making the pie charts go across the page diagonally left to write rather than horizontally left to write in one line.

这是我的代码:

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的情况(这是我需要使用的答案).我得到了三种不同的大小，加上说明了一些饼图的图例:

Here is what's happening with option 1 from accepted answer (which is the one I need to go with). I'm getting three different sizes plus legend covering some of the pie chart:

我正在努力了解如何使用CSS来调整虚线图的大小，因为整个容器的大小而不是实际图的大小都增加了，而且我不知道如何仅针对图自身来增大大小.有没有解决的办法?

I'm struggling to understand how to re-size dash graphs using CSS because the whole container increases in size rather than the actual graph and I don't know how to target just the graphs themself to make size bigger. Is there a way around this?

答

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

Plotly's domain is used for subplots. In your case you are plotting three individual plots one after the other and for each you are setting the domain separately.

您至少有两个选择:

使用您现在使用的方法，即3个单独的图，并使用CSS定义其位置
使用三个图形创建一个图，然后使用domain调整其位置.

Use the approach you are using now, i.e. 3 individual plots, and use CSS to define their position
Create one plot with three figures and use domain to adjust their position.

选项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()

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

相关推荐