合并两个绘图

Question

我为显示加载时间表的仪表板编写了一个脚本。成功的任务为绿色，错误的任务为红色。还有 CPU 和内存负载的图表。我尝试显示两个图表，一个在另一个下。但是，由于第一个图表的图例显示为文本并占用一些空间，因此第二个图表在 X 轴上并不完全重合。然后我尝试将两张图表合并为一张。但随后第一张图表中的红色条目就丢失了。起初，我认为这是因为不同的时间戳（有不同的表，微秒有不同的格式）。但后来我用数组常量制作了一个测试脚本，问题仍然存在。这是plotly 库的错误还是功能？我可以以某种方式以不同的方式显示流程图，以便可以组合这些图吗？我想使用plotly 来与图表交互。我尝试使用分散来加载时间表 - 但我并没有特别欣赏它的样子。目前尚不清楚该过程需要多长时间。

这是我的代码和图表示例。

import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np
from datetime import datetime, timedelta

# creating data for df_1
np.random.seed(42)
n_rows = 50
start_time = datetime(2023, 9, 21, 0, 0, 0)
end_time = start_time + timedelta(days=1)
chain_ids = np.random.choice(['Chain_01', 'Chain_02', 'Chain_03'], n_rows)
colors = np.random.choice(['green', 'red'], n_rows)
timestamps_start = pd.date_range(start=start_time, end=end_time, periods=n_rows)
timestamps_end = timestamps_start + pd.to_timedelta(np.random.randint(10, 1600, n_rows), unit='s')

df_1 = pd.DataFrame({
    'CHAIN_ID': chain_ids,
    'Color': colors,
    'TSTMP_START': timestamps_start,
    'TSTMP_END': timestamps_end
})

# creating data for df_2
n_rows_p = 150
timestamps_p = pd.date_range(start=start_time, end=end_time, periods=n_rows_p)
peak_used_gb = np.random.uniform(500, 1200, n_rows_p)
used_physical_gb = np.random.uniform(1200, 1800, n_rows_p)

df_2 = pd.DataFrame({
    'SERVER_TIMESTAMP': timestamps_p,
    'Peak_Used_GB': peak_used_gb,
    'Used_physical_GB': used_physical_gb
})

color_map = {'green': 'green', 'red': 'red', 'yellow': 'yellow'}

fig1 = px.timeline(df_1,
                   x_start='TSTMP_START',
                   x_end='TSTMP_END',
                   y='CHAIN_ID',
                   color='Color',
                   color_discrete_map=color_map)

fig2 = go.Figure()
fig2.add_trace(go.Scatter(x=df_2['SERVER_TIMESTAMP'], y=df_2['Peak_Used_GB'], mode='lines', name='Peak_Used_GB', line=dict(color='blue')))
fig2.add_trace(go.Scatter(x=df_2['SERVER_TIMESTAMP'], y=df_2['Used_physical_GB'], mode='lines', name='Used_physical_GB', line=dict(color='orange')))

fig_c = make_subplots(rows=2, cols=1, shared_xaxes=True, vertical_spacing=0.06, row_width=[0.1, 0.4])
fig_c.add_trace(fig1.data[0], row=1, col=1)
fig_c.add_trace(fig2.data[0], row=2, col=1)
fig_c.add_trace(fig2.data[1], row=2, col=1)

fig_c.update_layout(height=600)
fig_c.update_xaxes(type='date')

fig1.show()
fig_c.show()

图1和图2图表：

综合图表：

我期望这样的图表：

Answer 1

fig1 包含多条迹线。您可以迭代它们并将它们全部添加：

for trace in fig1.data:
  fig_c.add_trace(trace, row=1, col=1)

但是样式不会完全正确，因为来自

fig1

的布局信息未应用。目前无法轻松合并/更改使用plotlyexpress制作的绘图：https://github.com/plotly/plotly.py/issues/2647