Plotly技术问询：如何基于两个DataFrame绘制带颜色分类的双折线子图

问题背景 #

需要绘制上下两个子图，每个子图包含按3种颜色分类的日期对应数值折线。已实现单个DataFrame（data_A）的折线图，但使用add_trace绘制双DataFrame的子图时遇到问题，无法按Color分类生成多条折线。

单DataFrame可行代码：

fig = px.line(data_A,
              x="Date", y="Percent",
              color='Color',
              color_discrete_sequence=['green','red','gold'],
              markers=True)
fig.show()

尝试的子图代码（存在问题）：

from plotly.subplots import make_subplots
import plotly.express as px

fig = make_subplots(rows=2, cols=1, shared_xaxes=True, vertical_spacing=0.05)

fig.add_trace(x = data_A['Date'],
              y= data_A['Percent'],
#               color='Color',
#               color_discrete_sequence=['green','red','gold'],
              markers=True)

fig.add_trace(x = data_B['Date'],
              y= data_B['Percent'],
#               color='Color',
#               color_discrete_sequence=['green','red','gold'],
              markers=True)

示例数据：

data_A = [{'Date': '2022-01-01', 'Color': "Green", 'Percent': 40},
        {'Date': '2022-01-01', 'Color': "Red", 'Percent': 20},
        {'Date': '2022-01-01', 'Color': "Yellow", 'Percent': 30},
        {'Date': '2022-01-02', 'Color': "Green", 'Percent': 45},
        {'Date': '2022-01-02', 'Color': "Red", 'Percent': 30},
        {'Date': '2022-01-02', 'Color': "Yellow", 'Percent': 25},
        {'Date': '2022-01-03', 'Color': "Green", 'Percent': 40},
        {'Date': '2022-01-03', 'Color': "Red", 'Percent': 20},
        {'Date': '2022-01-03', 'Color': "Yellow", 'Percent': 30},
        {'Date': '2022-01-04', 'Color': "Green", 'Percent': 45},
        {'Date': '2022-01-04', 'Color': "Red", 'Percent': 25},
        {'Date': '2022-01-04', 'Color': "Yellow", 'Percent': 30}]

data_B = [{'Date': '2022-01-01', 'Color': "Green", 'Percent': 30},
        {'Date': '2022-01-01', 'Color': "Red", 'Percent': 50},
        {'Date': '2022-01-01', 'Color': "Yellow", 'Percent': 20},
        {'Date': '2022-01-02', 'Color': "Green", 'Percent': 65},
        {'Date': '2022-01-02', 'Color': "Red", 'Percent': 10},
        {'Date': '2022-01-02', 'Color': "Yellow", 'Percent': 25},
        {'Date': '2022-01-03', 'Color': "Green", 'Percent': 40},
        {'Date': '2022-01-03', 'Color': "Red", 'Percent': 30},
        {'Date': '2022-01-03', 'Color': "Yellow", 'Percent': 20},
        {'Date': '2022-01-04', 'Color': "Green", 'Percent': 55},
        {'Date': '2022-01-04', 'Color': "Red", 'Percent': 35},
        {'Date': '2022-01-04', 'Color': "Yellow", 'Percent': 10}]

问题原因 #

add_trace无法像px.line那样自动按Color字段分组生成多条折线，需要手动对每个颜色分组的数据创建trace，并指定到对应子图行。

解决方案 #

将数据转换为DataFrame，针对每个颜色分组，分别为两个子图添加对应的折线trace，保持颜色一致：

import pandas as pd
from plotly.subplots import make_subplots
import plotly.graph_objects as go

# 将列表数据转为DataFrame
df_a = pd.DataFrame(data_A)
df_b = pd.DataFrame(data_B)

# 定义颜色映射，和原代码保持一致
color_map = {
    "Green": "green",
    "Red": "red",
    "Yellow": "gold"
}

# 创建子图布局
fig = make_subplots(rows=2, cols=1, shared_xaxes=True, vertical_spacing=0.05,
                   subplot_titles=("Data A 折线图", "Data B 折线图"))

# 为Data A添加每个颜色的折线（第一行子图）
for color in color_map.keys():
    filtered_data = df_a[df_a['Color'] == color]
    fig.add_trace(go.Scatter(
        x=filtered_data['Date'],
        y=filtered_data['Percent'],
        name=f"{color} (A)",
        marker_color=color_map[color],
        markers=True,
        mode='lines+markers'
    ), row=1, col=1)

# 为Data B添加每个颜色的折线（第二行子图）
for color in color_map.keys():
    filtered_data = df_b[df_b['Color'] == color]
    fig.add_trace(go.Scatter(
        x=filtered_data['Date'],
        y=filtered_data['Percent'],
        name=f"{color} (B)",
        marker_color=color_map[color],
        markers=True,
        mode='lines+markers'
    ), row=2, col=1)

# 更新布局优化可读性
fig.update_layout(height=600, width=800, title_text="上下子图多分类折线图")
fig.update_xaxes(title_text="日期", row=2, col=1)
fig.update_yaxes(title_text="百分比", row=1, col=1)
fig.update_yaxes(title_text="百分比", row=2, col=1)

fig.show()

说明 #

• 用plotly.graph_objects.Scatter创建单个trace，替代px.line的自动分组逻辑
• 通过循环遍历颜色分组，过滤对应数据后添加到指定子图行
• 保持颜色映射统一，确保两个子图同分类折线视觉一致
• 添加子图标题和轴标签，提升图表可读性

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