Как связать масштаб (оси x) двух отдельных сюжетных графиков в потоковой линии? ⇐ Python

[Anonymous]

Я хочу визуализировать аудиодатику в потоковой связи с двумя отдельными графиками сюжета: один для формы волны доменного домена и один для MFCC (коэффициенты Cepstral Cepstral Mel-частота). Я хочу связать их x-оси , чтобы увеличить или панорамировать обновления одного сюжета обновления другого, сохраняя их синхронизированные. Неправильно.

Код: Выделить всё

trumpet

), чтобы избежать загрузки файлов. Это создает две сюжетные диаграммы, но масштабирование одной не влияет на другую. Как я могу связать их оси x для увеличения/pan?

Код: Выделить всё

import streamlit as st
import librosa
import numpy as np
import plotly.graph_objects as go

st.title("Audio Plots")

# Load Librosa example audio
audio, sr = librosa.load(librosa.ex('trumpet'))
duration = len(audio) / sr
time_axis = np.linspace(0, duration, len(audio))

# Compute MFCCs
mfccs = librosa.feature.mfcc(y=audio, sr=sr, n_mfcc=20)
mfcc_time = librosa.frames_to_time(np.arange(mfccs.shape[1]), sr=sr)

# Time Domain plot
fig1 = go.Figure()
fig1.add_trace(go.Scatter(x=time_axis, y=audio, line=dict(color="#4169E1"), name="Time Domain"))
fig1.update_layout(xaxis_title="Time (s)", yaxis_title="Amplitude", title="Time Domain", height=300)
st.plotly_chart(fig1, use_container_width=True)

# MFCC plot
fig2 = go.Figure()
fig2.add_trace(go.Heatmap(z=mfccs, x=mfcc_time, y=np.arange(1, 21), colorscale="Viridis", name="MFCC"))
fig2.update_layout(xaxis_title="Time (s)", yaxis_title="Coefficient", title="MFCC", height=300)
st.plotly_chart(fig2, use_container_width=True)

st.write(f"Duration: {duration:.2f}s, Samples: {len(audio)}, MFCC Frames: {mfccs.shape[1]}")

Что я попробовал:

[*] Использование make_subplots (shared_xaxes = true) , но я хочу отдельные сюжеты для гибкости макета. /> < /ul>

Код: Выделить всё

if "x_range" not in st.session_state:
st.session_state.x_range = None
def update_range(change):
if change and "xaxis.range[0]" in change:
st.session_state.x_range = [change["xaxis.range[0]"], change["xaxis.range[1]"]]
st.plotly_chart(fig1, key="time", on_change=update_range)
< /code>
Это иногда работает, но часто терпит неудачу из-за воспроизведения Streamlit. Есть ли лучший способ обработки событий RelayoutData, подобных RELayoutData, в Streamlit? Streamlit Run test_streamlit.py 

Спасибо миллион!

Подробнее здесь: https://stackoverflow.com/questions/795 ... -streamlit