【问题标题】:Set background color in Dash Plotly在 Dash Plotly 中设置背景颜色
【发布时间】:2022-01-26 22:54:00
【问题描述】:

我正在开发 Dash 应用程序,我正在尝试通过创建一个 .css 文件来为整个页面设置背景颜色:

body{
    background-color: darkcyan;
    margin: 0;
}

问题是颜色是正确的,但如果有使用 dcc.Graph 创建的图形,我仍然有白色部分

颜色为深青色,但不适用于图表。 这是我的绘图创建代码:

dcc.Graph(figure=fig_length,
          style={'width': '33%', 'display': 'inline-block', 'horizontal-align': 'right','vertical-align': 'up',"margin-top":"30px"}),
dcc.Graph(figure=fig_numbers,
          style={'width': '33%', 'display': 'inline-block',"margin-top":"30px"}),
dcc.Graph(figure=fig_clasification,
          style={'width': '33%', 'display': 'inline-block',"margin-top":"30px"}),

html.Div([
          dcc.Checklist(
          id="all-or-none",
          options=[{"label": "Select All", "value": "All"}],
          value=[],
          labelStyle={'margin-top': '10px'}
          )],style={"font-family": "Helvetica"}),
html.Div([
          dcc.Checklist(
          id='checklist_journals',
          options=[{'label': x, 'value': x, 'disabled': False}
                   for x in sorted(journals) #set in alphabetical order
                    ],
          value=sorted(journals)[0:15],
          labelStyle={'display': 'block','margin-left':'40px','margin-top':'10px'}
          )],style={'width': '33%', 'display': 'inline-block',"overflow-y":"scroll","height": "350px","font-family": "Helvetica"}), #'backgroundColor':'blue'
html.Div([dcc.Graph(id='journals_pie',figure=fig_pie_journals)],
          style={'width': '33%', 'display': 'inline-block',"font-family": "Helvetica"}),
html.Div([dcc.Graph(id='journals_graph', figure=fig1)],
         style={'width': '33%', 'display': 'inline-block',"font-family": "Helvetica"}),

我不明白为什么清单是彩色的,而其他图表是白色的。

【问题讨论】:

  • 您是否尝试将'background-color': 'darkcyan' 添加到图表样式中?

标签: python html css plotly-dash


【解决方案1】:

试试这个图表:

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

 dcc.Graph(
        id='example-graph-2',
        figure={
            'layout': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                }
            }

【讨论】:

  • 谢谢!!它有效
猜你喜欢
  • 2020-09-22
  • 2015-07-10
  • 1970-01-01
  • 2020-05-08
  • 1970-01-01
  • 2011-03-25
  • 2012-10-16
  • 2015-12-26
  • 1970-01-01
相关资源
最近更新 更多