如何使用Plotly(Dash)绘制指定样式的可视化图表

1. 环境准备 #

先安装所需依赖：
pip install dash pandas plotly

2. 实现代码示例 #

假设你的数据集为结构化表格，包含3个核心字段：横轴分类字段x_label、系列分组字段group、数值字段value，可直接参考以下代码调整适配你的实际数据：

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

# 1. 加载并处理数据集，此处替换为你的实际数据集加载逻辑
# 示例数据结构和数据集示例规则对齐
df = pd.DataFrame({
    "x_label": ["1月", "2月", "3月", "4月", "5月", "6月"] * 3,
    "group": ["系列A", "系列A", "系列A", "系列A", "系列A", "系列A",
              "系列B", "系列B", "系列B", "系列B", "系列B", "系列B",
              "系列C", "系列C", "系列C", "系列C", "系列C", "系列C"],
    "value": [12, 19, 14, 17, 21, 18, 8, 12, 9, 15, 11, 13, 5, 7, 3, 8, 6, 4]
})

# 2. 初始化Dash应用
app = dash.Dash(__name__)

# 3. 绘制目标样式图表
fig = px.line(df, 
              x="x_label", 
              y="value", 
              color="group",
              markers=True,  # 显示数据标记点，和目标效果对齐
              title="数据趋势图",
              labels={"x_label": "横轴分类", "value": "数值", "group": "分类组"})

# 自定义样式调整，匹配目标图表样式
fig.update_layout(
    plot_bgcolor="white",  # 画布背景设为白色
    xaxis=dict(showgrid=True, gridcolor="#f0f0f0"),  # X轴网格样式
    yaxis=dict(showgrid=True, gridcolor="#f0f0f0"),  # Y轴网格样式
    legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1)  # 图例置顶横向展示
)
fig.update_traces(line=dict(width=2.5), marker=dict(size=8))  # 调整线条和标记点大小

# 4. 配置应用布局
app.layout = html.Div([
    dcc.Graph(id="target-chart", figure=fig)
])

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

3. 自定义调整说明 #

• 如果需要改成柱状图，只需要把px.line替换为px.bar即可
• 系列颜色可通过color_discrete_map参数自定义每个分组的对应色值
• 悬浮提示内容可通过hovertemplate参数自定义，匹配你需要展示的数据集字段

内容的提问来源于stack exchange，提问作者Sohibjon