我们在jupyter notebook中绘制的图表一般都是静态的。
如果要改变图表，一般都是先修改代码，然后再重新运行，生成新的图表。

不过，通过 ipywidgets 库，我们就可以在jupyter notebook中绘制交互式的图表。

交互式图表与一般图表相比，主要优势在于它可以提供更多的信息和更好的可视化效果，
它可以让用户通过点击或拖动等操作来查看数据，从而更好地理解数据的含义和趋势。

本篇主要介绍如何通过 ipywidgets 库在 jupyter notebook 在绘制交互式图表。

1. ipywidges简介

ipywidgets是一个非常强大的Python库，它可以帮助你创建高质量的可视化界面，从而更好地展示数据和提供更好的用户体验。

它提供了一系列交互式的Python UI组件，可以让你轻松创建各种类型的GUI，而不需要太多的代码。

1.1. 安装

ipywidgets 针对不同的 jupyter 版本按装方式略有不同，我的jupyter是4.x版本，
安装很简单：

pip install ipywidgets

如果是其他版本的jupyter，请参考官方文档中针对不同版本的安装方法：
ipywidgets.readthedocs.io/en/latest/u…

1.2. 交互式组件

ipywidgets的交互式组件我平时主要使用的有：

1.2.1. 数值组件

分为整数和浮点数，比如：

import ipywidgets as widgets

widgets.IntSlider(value=7, min=0, max=10, step=1)

上面的代码生成一个可拖动的Slider，通过拖动改变数值，不用修改代码。

浮点数的组件也一样：

import ipywidgets as widgets

widgets.FloatSlider(value=7.5, min=0, max=10.0, step=0.1)

其中各个参数的含义：

value：默认值
min：最小值
max：最大值
step：变化的最小间隔

1.2.2. 布尔类型

布尔类型的组件典型的就是 Checkbox。

import ipywidgets as widgets

widgets.Checkbox(
    value=False,
    description='是否选择',
)

1.2.3. 选择类型

选择类型的组件就是我们经常遇到的下拉框：

import ipywidgets as widgets

widgets.Dropdown(
    options=['南京', '苏州', '无锡', '杭州'],
    value='南京',
    description='城市:',
)

1.2.4. 日期类型

选择日期也是很常见的一种组件：

import ipywidgets as widgets

widgets.DatetimePicker(
    description='选择时间: ',
    disabled=False
)

1.2.5. 其他类型

其他类型包括颜色选择，文件上传等等，我平时使用的比较少，感兴趣的朋友可以参考官方文档：
ipywidgets.readthedocs.io/en/latest/e…

2. 交互式示例

上面介绍的各种组件和绘制的图形关联起来，就可以在 jupyter notebook 中制作交互式图表了。

下面抛砖引玉，挑几个上面介绍的组件来制作交互式图表。

2.1. 折线图

原始显示如下：

import numpy as np
import matplotlib.pyplot as plt

x = np.linspace(1, 20, 20)
y = x**2    

plt.plot(x, y)
plt.show()

加入动态调节折线图横轴的范围：

import numpy as np
import matplotlib.pyplot as plt
import ipywidgets as widgets
from ipywidgets import interact

def draw(x_max):
    x = np.linspace(1, 20, 20)
    y = x**2    

    plt.plot(x, y)
    plt.xlim(0, x_max)
    plt.show()

x_max = widgets.IntSlider(value=8, min=0.5, max=20, step=1)
interact(draw, x_max=x_max)

2.2. 热力图

热力图的X轴和Y轴元素都可以调节：

x_all_labels = ["A_X", "B_X", "C_X", "D_X", "E_X"]
y_all_labels = ["A_Y", "B_Y", "C_Y", "D_Y", "E_Y"]


def draw(x_labels, y_labels):
    NX = len(x_labels)
    NY = len(y_labels)
    data = np.random.rand(NX, NY)

    plt.xticks(ticks=np.arange(NX), labels=x_labels)
    plt.yticks(ticks=np.arange(NY), labels=y_labels)

    plt.imshow(data, cmap=plt.cm.hot_r)
    plt.colorbar()
    plt.show()


x_filters = widgets.SelectMultiple(
    options=x_all_labels,
    value=x_all_labels,
    description="X轴元素",
    disabled=False,
)

y_filters = widgets.SelectMultiple(
    options=y_all_labels,
    value=y_all_labels,
    description="Y轴元素",
    disabled=False,
)

interact(draw, x_labels=x_filters, y_labels=y_filters)

3. 总结

上面的示例中演示了两种组件的应用方式，其他的组件也大同小异。
核心的步骤在于：

封装一个绘图函数，把想要动态修改的变量作为函数的参数
把想要动态修改的变量转换为合适的ipywidgets组件
通过 interact 函数，把绘图函数和ipywidgets组件关联起来

4. 附录

ipywidgets github 地址： github.com/jupyter-wid…

jupyter notebook 的交互式图表