как встроить онлайн сюжетную карту и ссылку на скрипт в существующий код Dash - PullRequest
Новая
       4

как встроить онлайн сюжетную карту и ссылку на скрипт в существующий код Dash

0 голосов
/ 23 февраля 2019

Я создал онлайновую картографическую карту Plotly с картой США, в которой штаты получают данные из базы данных sqlite ... Я создал онлайновый html-файл в своей учетной записи в облаке plotly, чтобы иметь возможность встраивать его в свою пользовательскую веб-страницу Dash, которая в настоящее время находится в режиме реального времени.на местномЯ не мог найти, как встроить этот онлайн-график в мой существующий код Dash app.layout, чтобы я показывал все на одной веб-странице.Ниже приведен общий код:

1) Сначала я создаю онлайновую карту Ploly choropleth на своем аккаунте Plotly.Это прекрасно работает. 

data = [ dict(
        type='choropleth',
        locations = df['code'],
        z = df['total exports'].astype(float),
        locationmode = 'USA-states',

       ................................. Here I truncated the code for the sake of space................................

        py.plot({"data":data, "layout":layout}, filename='US _Social_Sentiment_Map.html')

2) Затем я извлек сгенерированную ссылку HTML из HTML-части моего встраиваемого аккаунта для приведенной выше карты.Это выглядит примерно так: 

<div>
    <a href="https://plot.ly/~USERNAME/2/?share_key=qYb0mASJDFasdnfasdfASD" target="_blank" title="US _Social_Sentiment_Map.html" style="display: block; text-align: center;"><img src="https://plot.ly/~myUser/2.png?share_key=qYb0mASJDFasdnfasdfASD" alt="US _Social_Sentiment_Map.html" style="max-width: 100%;width: 600px;"  width="600" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="sailor77:2" sharekey-plotly="qYb0mASJDFasdnfasdfASD"
 src="https://plot.ly/embed.js" async></script>
</div>

3) Затем я хотел бы встроить приведенную выше ссылку Ploly choropleth map в код Python Dash и опубликовать карту на полученном веб-сайте по адресу http://127.0.0.1:8050/. I.не мог понять, как встроить его, несмотря на различные испытания.Мой код Dash (без ссылки на карту выше) выглядит следующим образом (источник: https://github.com/Sentdex/socialsentiment/blob/master/dash_mess.py) 

app = dash.Dash(__name__)
app.layout = html.Div([   


        html.Div(className='container-fluid', children=[html.H2('Live Twitter Sentiment', style={'color':"#CECECE"}),
                                                        html.H5('Search:', style={'color':app_colors['text']}),
                                                  dcc.Input(id='sentiment_term', value='twitter', type='text', style={'color':app_colors['someothercolor']}),
                                                  ],
                 style={'width':'98%','margin-left':10,'margin-right':10,'max-width':50000}),



        html.Div(className='row', children=[html.Div(id='related-sentiment', children=html.Button('Loading related terms...', id='related_term_button'), className='col s12 m6 l6', style={"word-wrap":"break-word"}),
                                            html.Div(id='recent-trending', className='col s12 m6 l6', style={"word-wrap":"break-word"})]),

        html.Div(className='row', children=[html.Div(dcc.Graph(id='live-graph', animate=False), className='col s12 m6 l6'),
                                            html.Div(dcc.Graph(id='historical-graph', animate=False), className='col s12 m6 l6')]),

        html.Div(className='row', children=[html.Div(id="recent-tweets-table", className='col s12 m6 l6'),
                                            html.Div(dcc.Graph(id='sentiment-pie', animate=False), className='col s12 m6 l6'),]),


        dcc.Interval(
            id='graph-update',
            interval=1*1000
        ),
        dcc.Interval(
            id='historical-update',
            interval=60*1000
        ),

        dcc.Interval(
            id='related-update',
            interval=30*1000
        ),

        dcc.Interval(
            id='recent-table-update',
            interval=2*1000
        ),

        dcc.Interval(
            id='sentiment-pie-update',
            interval=60*1000
        ),

    ], style={'backgroundColor': app_colors['background'], 'margin-top':'-30px', 'height':'2000px',},
)

Спасибо за любые предложения или помощь.

1 Ответ

0 голосов
/ 08 марта 2019

Наконец, я решил, как добавить сюжетную choropleth_map в мой код Dash.Предполагая, что вы установили последние версии Dash, мне пришлось сделать 3 изменения, чтобы он заработал.

Сначала добавьте идентификатор choropleth_map в мой раздел app.layout = html.Div ([', как показано ниже).

html.Div(className='row', children= [html.Div(dcc.Graph(id='choropleth_map', style={"height": "100%", "width": "100%"}, config=dict(displayModeBar=True)), className='col s12 m6 l6'),
html.Div(dcc.Graph(id='sentiment-pie', animate=False), className='col s12 m6 l6')]),

Во-вторых, добавьте значение интервала, чтобы карта обновлялась. Это также находится в разделе «app.layout». 

dcc.Interval(
    id='choropleth_map-update',
    interval=10*1000, n_intervals=0
),

В-третьих, добавьте следующий раздел какперезвоните первоначальные объявления Dash. 

@app.callback(Output("choropleth_map", "figure"),
             [Input('input-div', 'children'),
                 #Input(component_id='sentiment_term', component_property='value'),
              Input('choropleth_map-update', 'n_intervals')]) 
def map_callback(sentiment_term, n_intervals):
    #df = pd.read_csv(r'LOCAL PATH\mySourceFile.csv')  #if you use a local CSV file
    sql_term = "SELECT XXXX"   # if you read from a database
    df = pd.read_sql(sql_term, conn)
    return choropleth_map(df, sentiment_term)

Это хорошо сработало для меня ... Надеюсь, вы сможете повторно подать заявку.

...