Question

我用美国地图创建了一个在线的Plotly choropleth地图，其中各州从sqlite数据库中获取数据... 我在我的plotly云帐户中创建了一个在线html文件，以便将其嵌入到当前位于本地主机的自定义Dash网页中。我找不到如何将此在线可打印图形嵌入到现有的Dash app.layout代码中，以便将所有内容显示在同一网页中。下面是整体代码：

1）首先，我在我的Plotly帐户上创建了一个在线Plotly Choropleth地图。效果很好。

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）然后，我想将上面的Plotly choropleth映射链接嵌入到下面的python Dash代码中，并将该映射发布到结果网站http://127.0.0.1:8050/上。尽管有不同的尝试，但我仍无法弄清楚如何嵌入它。我的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',},
)

感谢您的任何建议或帮助。

Answer 1

最后，我解决了如何在Dash代码中添加可绘制的choropleth_map。假设您已经安装了最新的Dash版本，我必须进行3处更改才能使其正常工作。

首先是将choropleth_map id添加到我的“ 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)

这对我很有效...希望您可以重新申请。

如何将在线可绘制的Choropleth映射链接和脚本嵌入到现有的Dash代码中

1 个答案: