Python Da sh легенда графика, покрывающая метки оси X - PullRequest
0 голосов
/ 03 апреля 2020
В веб-приложении

My Python имеется «График» Plotly Da sh, легенда которого охватывает метки оси X. Я попытался настроить следующие элементы, но безуспешно и без видимых изменений:

  1. стиль легенды 'margin-top'
  2. margin 'b'
  3. padding 'b'

Вот код:

    import dash
    import dash_core_components as dcc
    import dash_html_components as html

    graph = dcc.Graph(
        figure = {
            'data': data, 
            'layout': dict(
                hovermode = "closest",
                height = 400, # 500 is a bit too big on a smartphone
                legend = dict(
                    font=dict(color='#7f7f7f'), 
                    orientation="h", # Looks much better horizontal than vertical
                    style={'margin-top': 100},
                ),
                font = {
                    'family': 'Segoe UI', 
                    'color': "#7f7f7f"
                },
                # Added more margin on the left side to fix the cutoff True/False labels on the booleans
                margin = dict(l=40, r=25, b=10, t=10),
                padding = dict(l=0, r=0, b=10, t=0),
            )
        }
    )

Вот как это выглядит, показывая легенду, перекрывающую метки оси X:

Chart showing overlapping legend

1 Ответ

0 голосов
/ 03 апреля 2020

Я нашел решение здесь в документации.

y Родитель: layout.legend Тип: число между или равно -2 и 3 Устанавливает положение y (в нормализованных координатах) легенды. По умолчанию "1" для вертикальных легенд, по умолчанию "-0.1" для горизонтальных легенд на графиках без ползунков диапазона и по умолчанию "1.1" для горизонтальных легенд на графике с одним или несколькими ползунками диапазона.

По умолчанию это -0,1 , поэтому я установил его на -0,15 , что немного ниже, чтобы дать меткам оси X еще больше места.

import dash
import dash_core_components as dcc
import dash_html_components as html

graph = dcc.Graph(
    figure = {
        'data': data, 
        'layout': dict(
            hovermode = "closest",
            height = 400, # 500 is a bit too big on a smartphone
            legend = dict(
                font=dict(color='#7f7f7f'), 
                orientation="h", # Looks much better horizontal than vertical
                y=-0.15
            ),
        )
    }
)

Результат: image showing problem solved

...