如何使用单个滑块创建具有可滚动 x 轴的多个绘图答案

【问题标题】：How to create multiple plots with scrollable x axis with a single slider如何使用单个滑块创建具有可滚动 x 轴的多个绘图
【发布时间】：2018-11-08 10:51:40
【问题描述】：

我打算创建 2-3 个在公共时间轴上共享的图，这些图可以使用单个滑块进行交互滚动。还有一个限制条件，即每个变量的采样频率不同但时间窗口相同。

x  - time
y1 - values sampled every 1 second
y2 - values sampled every 10 seconds
y3 - values sampled every 100 seconds

我们怎样才能做到这一点。

试过这个示例代码

import matplotlib.pyplot as plt
from ipywidgets import interact
%matplotlib inline

def f(n):
    plt.plot([0,1,2],[0,1,n])
    plt.show()
interact(f,n=(0,10))

我想要类似的东西，唯一的变化是 x 和 y 轴数据是恒定的，滑块小部件用于在图表显示上以特定时间窗口左右滚动图表（此处为 x 轴）

【问题讨论】：

到目前为止您尝试过什么？这可能是具有几个不同问题的问题，最好将其分解为各个问题。是否存在某些行为与预期不符的地方？你的数据是什么样的，你能提供一个小例子吗？
你应该开始编写代码，如果你有一个特定的问题，你应该在 SO 上提问。您可以在此处修改 SO 上的代码：stackoverflow.com/q/31001713/8881141

标签： python-3.x matplotlib jupyter-notebook dashboard ipywidgets

【解决方案1】：

部分解决了它的交互性问题。

X 轴可以随着滑块的移动而滚动。

%matplotlib inline
from ipywidgets import interactive
import matplotlib.pyplot as plt
import numpy as np

def f(m):
    plt.figure(2)
    x = np.linspace(-10, 10, num=1000)
    plt.plot(x,x)
    #plt.plot(x, m * x)
    plt.xlim(m+2, m-2)
    plt.show()

interactive(f, m=(-2.0, 2.0))

【讨论】：

【解决方案2】：

下面的实现片段。

加载所有图表并仅使用带有滑块功能的 plt.xlim(min_x,max_x) 操作 xlim

selection_range_slider = widgets.SelectionRangeSlider(
options=options,
index=index,
description='Time slider',
orientation='horizontal',
layout={'width': '1000px'},
continuous_update=False
)

#selection_range_slider
def print_date_range(date_range):
    print(date_range)
    plt.figure(num=None, figsize=(15, 4), dpi=80, facecolor='w', 
    edgecolor='k')


    min_x=date_range[0]
    max_x=date_range[1]

    ax1 = plt.subplot(311)
    plt.plot(Data_1.Timestamp,Data_1.value,'r')
    plt.setp(ax1.get_xticklabels(), fontsize=6,visible=False)
    plt.xlabel('Data_1')
    ax1.xaxis.set_label_coords(1.05, 0.5)


    # share x only
    ax2 = plt.subplot(312, sharex=ax1)
    plt.plot(Data_2.Timestamp,Data_2.value,'b')
    # make these tick labels invisible
    plt.setp(ax2.get_xticklabels(), visible=False)
    plt.xlabel('Data_2')
    ax2.xaxis.set_label_coords(1.05, 0.5)

    # share x and y
    ax3 = plt.subplot(313, sharex=ax1)
    plt.plot(Data_3.Timestamp,Data_3.value,'g')
    ax3.xaxis.set_label_coords(1.05, 0.5)

    #plt.xlim(0.01, 5.0)
    plt.xlim(min_x,max_x)
    plt.show()
    #plt.xlabel('Data_3')

widgets.interact(
    print_date_range,
    date_range=selection_range_slider
    );

【讨论】：