(Da sh Plotly Bootstrap) график невидим и не организован с bootstrap - PullRequest
Новая
       14

(Da sh Plotly Bootstrap) график невидим и не организован с bootstrap

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

Здравствуйте, я делаю сайт, который позволяет пользователю выбирать строку и столбец, и он будет отображать данные мозговых волн (для этого я использую mne- python) графики в этой строке и столбце. Но есть какая-то проблема с моей программой. Позвольте мне сначала показать вам картинку. как вы можете видеть это выглядит хорошо. введите описание изображения здесь

, но если я изменю столбец с 2 на 3, графики будут отсутствовать. странная вещь - только визуализация отсутствует, а не данные. введите описание изображения здесь

когда я наведу курсор на график, он отображает данные графика так же, как и другие графики, показывающие линии. введите описание изображения здесь

Это моя первая проблема. Графики не видны.

Во-вторых, у меня проблема с bootstrap сеточной организацией графиков. Я использовал «col-3» для этих верхних картинок, но на этот раз я использовал просто «col» в качестве className. То же, что и раньше, отлично работает для 4rows 2col. введите описание изображения здесь

Теперь, если я изменю значение столбца на 3 с 2, графики будут организованы не так, как я ожидал, а также графики будут потеряны, как и раньше. Я слышал, что bootstrap «col» автоматически организует объекты, но мои графики не организованы в правильном порядке. введите описание изображения здесь

вот мой код. 

@app.callback(
Output('eeg-graphs', 'children'),
[Input('file-input', 'filename'),
 Input('row-dropdown', 'value'),
 Input('col-dropdown', 'value')]    
)
def generate_graph(input_name, row, col):

raw = mne.io.Raw(input_name, preload=True)
print(raw.info)

picks = mne.pick_types(raw.info, meg='grad', exclude=[])
start, stop = raw.time_as_index([0, 150])

n_channels = row * col
data, times = raw[picks[:n_channels], start:stop]
ch_names = [raw.info['ch_names'][p] for p in picks[:n_channels]]
print("ch names : ", *ch_names)


row_list = []
col_list = []
i = 0
#append to row_list with className = "row"/ using bootstrap
for r in range(0, row):
    #append to col_list with className = "col"/ using bootstrap
    for c in range(0, col):
        col_list.append(html.Div(className = "col",
                              children = [dcc.Graph(
                                style={'width': '100%', 'height': '100%'},
                                # config={'displaylogo': False, 'editable': True, 'displayModeBar': False},
                                id='graph-{}'.format(i),
                                figure=dict(
                                    data=[dict(
                                        x=times, y=data.T[:, i], type='scattergl'
                                    )],
                                    layout=dict(
                                        title='Figure ' + str(i + 1),
                                        font=dict(family='Arial, monospace', size=10),
                                        autosize=True,
                                        margin=dict(l=50, r=50, b=30, t=30, pad=0),
                                        yaxis=dict(title='Month', linewidth=1, mirror=True),
                                        xaxis=dict(title='Time', linewidth=1, mirror=True),
                                    ))
                                )]
                                )        
                              )
        i+=1
        print("=================col_list" , *col_list)
    row_list.append(html.Div(className = "row",
                                 id = 'row-{}'.format(r),
                                 children = col_list))
    col_list = []
    print("===============row_list", len(row_list))

return row_list

Я складываю графики в одну и ту же строку в col_list с className «col» и добавляю его в row_list с помощью имя класса «строка». вот мой код компоновки. Вот где возвращается мой вывод функции обратного вызова. 

html.Div(className = 'right_content',
         children = [
             html.Div(className = "container", id = 'eeg-graphs')
             ]
    ),

Пожалуйста, помогите мне найти решение этих двух проблем:

некоторые из визуализаций графиков отсутствуют !! Сетка bootstrap не работает должным образом, и я попытался использовать метод subplots, но я думаю о веб-сайте, что, если пользователь нажимает на график c на экране, график меняет цвет фона и выбирается. И если пользователь нажмет какую-то кнопку, выбранные графики будут отображаться в другом окне. Я думал, что subplot не подходит для обновления отдельных графиков с помощью обратных вызовов. Поэтому я разделил все графики на отдельные d cc .Graph. Если я ошибаюсь, поправьте меня. Также, если у вас есть идеи по улучшению структуры кода, или если вы думаете, что есть лучший способ сделать это, пожалуйста, не стесняйтесь сообщить. Я новичок в Da sh -Плотно, поэтому любая помощь приветствуется.

...