tkinter柱状图悬停交互

要实现悬停交互，最主要的还是.mpl_connect指令——绑定鼠标移动事件。绑定了之后，再进行设计ax.text的操作。

其中需要注意的是，每对canvas画布进行一次修改，需要进行一次canvas.draw()。

同时其中的难点在于，如何定位柱子的位置，超过柱子的坐标如何设计。

具体代码解析见注释。

import tkinter as tk
from matplotlib.figure import Figure
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg


def on_hover(event):
    # 该变量主要用于对比，当移入的时候等于index就增加text，不等于就删除text，形成悬停交互的样子。
    global nindex
    # event.xdata 获取鼠标所在的柱的索引,得到的是触发的事件所在的x位置。
    # 设置if 主要是为了避免当鼠标移动事件在坐标外的时候，会返回None值，就会报错。
    if event.xdata is None:
        # 设置在坐标轴外，清除标题。
        if ax.texts:
            status_label.config(text=f"Value: {''}")
            ax.texts[0].remove()
            # 对画板进行操作后要draw，才会有显示。
            canvas.draw()
    else:
        # 获取一条柱子的宽度
        _width = bar[0].get_width()
        # 由于柱子是取对应的x刻度的左右两侧宽度的1/2，所以如果单单只是int(event.xdata)，那刻度坐半边就会显示另一根柱子的值。所以要加一半宽度。
        index = int(event.xdata+_width/2)
        # 当鼠标移入时，细微的变化都会建立一个ax.text，由于同一个位置，所以我们看不出来，所以要做一个限制，只能存在一个。
        if nindex == index and index < len(data):
            # 如果在同一根柱子上，就等同于拥有了一个text了，所以要进行判断，要没有的时候才创建。
            if ax.texts:
                pass
            else:
                # 获取柱的数值
                value = data[index]
                # 在状态栏中显示柱的数值
                status_label.config(text=f"Value: {value}")
                # 位置是x，高度是数值+0.5的位置。
                ax.text(index, value + 0.5, str(value), fontsize=12, color='red', ha='center', va='center')
                canvas.draw()
        elif nindex != index or index > len(data):
            # 存在text时，就删除；不存在，特指一开始移入的时候，nindex是-999不等于index，让它等于了，才能进行上面if的text创建。
            if ax.texts:
                nindex = index
                ax.texts[0].remove()
                canvas.draw()
            else:nindex = index

nindex = -999
# 创建Tkinter窗口
window = tk.Tk()
window.title("Interactive Bar Chart")

# 创建Matplotlib图形对象
fig = Figure(figsize=(6, 4), dpi=100)
ax = fig.add_subplot(111)

# 柱状图数据
data = [10, 15, 7, 12, 9]

# 绘制柱状图
bar = ax.bar(range(len(data)), data)


# 创建状态栏标签
status_label = tk.Label(window, text="Value: ")

# 将Matplotlib图形嵌入到Tkinter窗口中
canvas = FigureCanvasTkAgg(fig, master=window)
canvas.draw()
width, height = canvas.get_width_height()
canvas.get_tk_widget().pack(side=tk.TOP, fill=tk.BOTH, expand=1)

# 绑定鼠标移动事件
canvas.mpl_connect("motion_notify_event", on_hover)

# 显示状态栏标签
status_label.pack(side=tk.BOTTOM)

# 运行Tkinter事件循环
window.mainloop()