Сложенные столбчатые диаграммы Plotly-Dash соседствуют с выпадающим списком - PullRequest
Новая
       9

Сложенные столбчатые диаграммы Plotly-Dash соседствуют с выпадающим списком

1 голос
/ 20 марта 2019

У меня есть следующий фрейм данных:

- dcc. Выпадающий список для выбора проблемы находится здесь на странице - 

Job  Tenure  Location  Topic
CSM   3-5    England   Budget cuts 
CSM   6-10   Scotland  Budget cuts
SA    0-2    India     Time consuming demands
SA    3-5    England   Lack of oversight
SA    6-10   Germany   Lack of support
MIA   11-15  India     Lack of support
ADCS  20+    England   Bureaucracy
MIA   16-20  Ireland   Bureaucracy
ADCS  20+    USA       Budget cuts

Окончательный результат должен иметь три набора диаграмм. Каждый набор состоит из двух гистограмм, которые сложены и расположены рядом.

Вот как будет выглядеть результат:

График один, состоящий из двух столбцов рядом:

бар 1 = сложенные задания (высота = 9, стек состоит из 2xCSM, 3xSA, 2xMIA, 2xADCS)

bar2 = распределение проблем по ролям. например если в раскрывающемся списке выбрана проблема «сокращения бюджета», этот график будет иметь высоту = 3, стек состоит из 2xCSM, 1xADCS.

Бар 2 необходимо обновить, когда вы выбираете проблему из выпадающего списка. Поэтому, если я сейчас выберу вопрос «Отсутствие контроля», столбец 2 будет иметь высоту 1, сложенную заданием 1 x SA.

Графики 2 и 3 будут такими же, как указано выше, но для владения и размещения соответственно вместо работы. Таким образом, стеки будут «владение / местоположение» во всех случаях, когда это было задание в вышеуказанном случае.

Если честно, даже если кто-то покажет мне, как сделать первый график, я смогу повторить код для графиков 2 и 3. Надеюсь, это имеет смысл.

Вот вывод, который я получаю. По сути, я хочу, чтобы эти две полосы на одной и той же оси не разделялись, как здесь (игнорируйте значения высоты, так как моя df больше, чем я дал здесь).

enter image description here

Спасибо, ребята.

1 Ответ

1 голос
/ 22 марта 2019

Вот простой рабочий пример, адаптированный из 

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
                {'x': [1, 2, 3], 'y': [5, 2, 6], 'type': 'bar', 'name': 'SF', 'xaxis': 'x2',},
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': u'Montréal', 'yaxis': 'y2',},
            ],
            'layout': {
                'title': 'Dash Data Visualization',
                'xaxis': {'domain':[0, 0.5]},
                'xaxis2': {'domain':[0.6, 1]},
                'yaxis2': {'anchor': 'x2'}
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Это должно вывести что-то вроде,

enter image description here

...