Динамическое добавление трасс на график с выпадающим вводом - PullRequest
Новая
       6

Динамическое добавление трасс на график с выпадающим вводом

0 голосов
/ 08 июня 2018

Сейчас я работаю над своим первым веб-приложением.Недавно я начал изучать уроки по Python и некоторым модулям.Большинство вопросов, которые у меня есть, я могу понять, посмотрев их, за исключением этого.Я не могу понять это.

Цель заключается в следующем: - Я пытаюсь показать график с линейной диаграммой, которая динамически обновляется при вводе пользователем.Пользователь может выбрать несколько элементов из раскрывающегося списка с несколькими значениями.

Если я добавлю несколько «go.Scatters», я могу добавить несколько строк на график, за исключением того, что трасса на графике является статической.Итак, я попытался написать цикл for в go.Scatter, который добавляет больше go.Scatters для каждого элемента в data_name.Каждый раз, когда я пытаюсь, я получаю синтаксические ошибки.Я пытался добавить значения в список данных в dcc.Graph.Каждый раз я терпел неудачу.

У меня следующие вопросы: - Где я могу добавить цикл for, чтобы добавить трассировки в список данных?- Как должен строиться цикл for?

Я только новичок, поэтому приветствуются все советы: -)

Заранее спасибо.

Если я не совсем ясно по этому вопросу, пожалуйста, дайте мне знать.

Мой код следующий: 

import dash
import dash_core_components as dcc
import dash_html_components as html
from pandas_datareader.data import DataReader
import time
from collections import deque
import plotly.graph_objs as go
import random

app = dash.Dash('vehicle-data')

max_length = 50
#times = deque(maxlen=max_length)
times = [1,2,3,4,5,6,7,8,9,10,11,12]
oil_temps = [11,12,13,14,15,16,17,18,19]
intake_temps = [11,12,13,14,15,16,17,18,19]
coolant_temps = [11,12,13,14,15,16,17,18,19]
#rpms = deque(maxlen=max_length)
#speeds = deque(maxlen=max_length)
#throttle_pos = deque(maxlen=max_length)

data_dict = {"NH Utrecht":oil_temps,
"NH Amsterdam": intake_temps,
"NH Schiller": coolant_temps
#"NH Sparrenhorst":rpms,
#"Amsterdam":speeds,
#"Overig":throttle_pos
}

app.layout = html.Div([
    html.Div([
        html.H2('Hotel',
                style={'float': 'left',
                       }),

        ]),
    dcc.Dropdown(id='vehicle-data-name',
                 options=[{'label': s, 'value': s}
                          for s in data_dict.keys()],
                 value=['NH Utrecht'],
                 multi=True
                 ),
    html.Div(children=html.Div(id='graphs'), className='row'),
    dcc.Interval(
        id='graph-update',
        interval=100),
    ], className="container",style={'width':'98%','margin-left':10,'margin-right':10,'max-width':50000})



@app.callback(
    dash.dependencies.Output('graphs','children'),
    [dash.dependencies.Input('vehicle-data-name', 'value')],
    events=[dash.dependencies.Event('graph-update', 'interval')]
    )

def update_graph(data_names):
    graphs = []

    #update_obd_values(times, oil_temps, intake_temps, coolant_temps, rpms, speeds, throttle_pos)
    if len(data_names)>2:
        class_choice = 'col s12 m6 l4'
    elif len(data_names) == 2:
        class_choice = 'col s12 m6 l6'
    else:
        class_choice = 'col s12'

    html.Div(children=
    graphs.append(dcc.Graph(
        figure=go.Figure(
        data = [

        go.Scatter(
                x=times,
                y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156],
                name='Hotel Okura',
                marker=go.Marker(
                    color='rgb(55, 83, 109)'
                ),
                type='scatter',
                connectgaps=True
            ),



        ],

        layout=go.Layout(
            title='Hotel comparison data',
            showlegend=True,
            legend=go.Legend(
                x=1.0,
                y=1.0
            ),
            margin=go.Margin(l=40, r=0, t=40, b=30)
        ),


    ),


    style={'height': 300},
    id='my-graph'
 )
        ))

    return graphs




external_css = ["https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"]
for css in external_css:
    app.css.append_css({"external_url": css})

external_js = ['https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js']
for js in external_css:
    app.scripts.append_script({'external_url': js})


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

Я использовал цикл for следующим образом (который, очевидно, не работает, потому что я пытаюсь добавить график вместо времени данных).Но data.append не работает): 

for data_name in data_names:
            graph.append(go.Scatter(
                x=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
               name='Voorbeeld',
                marker=go.Marker(
                    color='rgb(255, 153, 0)'

                                ),
                type='scatter'

            ))
...