尝试在一个页面中运行多个破折号应用程序

Question

Greetings=我正在尝试在一个页面中构建多个短划线应用程序。换句话说，用户在页面顶部看到一个数据可视化，向下滚动，看到一些示例文本，向下滚动，然后看到另一个数据可视化。代码运行，但只填充第二个数据可视化（以及示例文本）。任何帮助都将不胜感激。在

下面是示例代码：

import plotly.plotly as py
import plotly.graph_objs as go
import numpy as np 
import pandas as pd
import requests
import io
import re
import dash 
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output 

from app import server 

app = dash.Dash('dash_36', sharing=True, url_base_pathname='/dash_36', 
csrf_protect=False, server=server) 

app.config['suppress_callback_exceptions']=True

df = pd.read_csv('app_8/main.csv')

colors = {
'background': '#111111',
'text': '#7FDBFF'
}

app.layout = html.Div([

html.A("Previous Chart:    ", href='dash_16'),
html.A("     Next Chart:", href='dash_18'),
html.A("     Back to Main Page:", 
href='https://ds.org/index'),

dcc.Graph(
    id='Senators of the United States 115th Congress: '
                  'America ~ A Country Up For $ALE',
    figure={

        'data': [
            go.Scatter(
                x=df[df['party'] == i]['sector_total'],
                y=df[df['party'] == i]['industry_total'],
                #z=df[df['candidate_name'] == i]['contributor_total'],
                text=df[df['party'] == i]['candidate_name'],
                mode='markers',
                opacity=0.7,
                marker={
                    'size': 15,
                    'line': {'width': 0.5, 'color': 'white'}
                },
                name=i
            ) for i in df.party.unique()
        ],

        'layout': go.Layout(
            xaxis={'title': 'Sector Total'},
            yaxis={'title': 'Industry Total'},
            #margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            #legend={'x': 0, 'y': 1},
            hovermode='closest',
            title='Sector Total, Industry Total & Candidate Name by 
            Party',
             plot_bgcolor= colors['background'],
            paper_bgcolor=colors['background'],
            height=700,
            font= {
                'color': colors['text'],
            } 
        )
    }
),

dcc.Markdown('''

# SAMPLE TEXT

# This is an <h1> tag

## This is an <h2> tag

###### This is an <h6> tag
'''), 

dcc.Markdown('''
*This text will be italic*

_This will also be italic_


**This text will be bold**

__This will also be bold__

_You **can** combine them_
'''),

dcc.Graph(
    id='Senators of the United States 115th Congress: '
                  'America ~ A Country Up For $ALE', 
    figure={
        'data': [
            go.Scatter(
                x=df[df['contributor_name'] == i] 
                ['contributor_individual'],
                y=df[df['contributor_name'] == i]['contributor_pac'],
                #z=df[df['candidate_name'] == i]['contributor_total'],
                text=df[df['contributor_name'] == i]['candidate_name'],
                mode='markers',
                opacity=0.7,
                marker={
                    'size': 15,
                    'line': {'width': 0.5, 'color': 'white'}
                },
                name=i
            ) for i in df.contributor_name.unique()
        ],
        'layout': go.Layout(
            xaxis={'title': 'Contributor Individual'}, 
            yaxis={'title': 'Contributor PAC'},
            #margin={'l': 10, 'b': 10, 't': 10, 'r': 10},
            #legend={'x': 0, 'y': 1},
            hovermode='closest',
            title='Contributor Individual, Contributor PAC & Candidate 
            Name by Contributor Name',
            plot_bgcolor= colors['background'],
            paper_bgcolor=colors['background'],
            height=700,
            font= {
                'color': colors['text'],
            } 
        )
    }
)



])

Answer 1

我们的想法是为每个破折号使用两个不同的脚本，然后使用另一个脚本进行连接。您可以按照本教程操作：multiple dash

最后有一个例子。在