Python可视化交互库——dash——设置颜色

myzbx 2025-01-20 15:09 22 浏览

模块 dash.html 包含所有 HTML 标签, 可以用其设置文本及背景颜色.

模块 dash.dcc 包含交互的高级组件.

代码

import pandas as pd
import plotly.express as px
from dash import Dash, html, dcc

app = Dash()     # 初始化 Dash

# 预设样式
colors = {
    'background': '#7fffec',     # 背景颜色
    'text':       '#7FDBFF'      # 文字颜色
}

df = pd.DataFrame({'x': [1, 2, 3], 'SF': [4, 1, 2], 'Montreal': [2, 4, 5]})  # 原始数据： 'SF'和'Montreal'
fig = px.bar(df, x='x', y=['SF', 'Montreal'], barmode='group')                # 柱状图

# 更新柱状图样式： 设置背景颜色及文本颜色
fig.update_layout(
    plot_bgcolor=colors['background'],
    paper_bgcolor=colors['background'],
    font_color=colors['text']
)

app.layout = html.Div(
    style={'backgroundColor': colors['background']},    # 设置全局样式
    children=[
        html.H1(
            children='Hello Dash',
            style={
                'textAlign': 'center',                 # 文本对齐方式
                'color': colors['text']                # 文本内容
            }
        ),

        html.Div(
            children='Dash: 一款Python web应用框架',
            style={
                'textAlign': 'center',                 # 文本对齐方式
                'color': colors['text']                # 文本内容
            }
        ),

        dcc.Graph(
            id='dash-example-graph-colored',
            figure=fig
        )
    ])

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

结果

CSS 颜色

上一篇：人教版小学美术三年级上册《第6课黑与白》教案
下一篇：点击导航栏按钮切换按钮背景色

Python可视化交互库——dash——设置颜色

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

20个免费音乐音效下载网站，无版权素材商业影片也可用

comfyui安装MimicMotion扩展，AI跳舞动作模仿

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331