跳转至

交互 Presets

交互 Presets 增强图表的用户交互能力,让用户能够通过鼠标操作探索数据。

with_tooltip

应用标准 tooltip 配置,在鼠标悬停时显示数据详情。

函数签名:

def with_tooltip(chart, shared=True, show_crosshairs=False)

参数: - chart (Chart): 图表实例 - shared (bool, 可选): 是否共享 tooltip(多系列时显示所有系列数据),默认 True - show_crosshairs (bool, 可选): 是否显示十字准线,默认 False

返回: 应用 tooltip 后的图表实例

示例:

from pyantv import Line
from pyantv.presets import with_tooltip

chart = Line.from_data(data=data, x_field_name="x", y_field_name="y")

# 默认配置(共享 tooltip,无十字准线)
with_tooltip(chart)

# 启用十字准线
with_tooltip(chart, show_crosshairs=True)

# 不共享 tooltip(仅显示当前系列)
with_tooltip(chart, shared=False)

chart.render("tooltip.html")


with_element_highlight

启用元素高亮交互,鼠标悬停时高亮当前元素,其他元素变暗。

函数签名:

def with_element_highlight(chart, background=False)

参数: - chart (Chart): 图表实例 - background (bool, 可选): 是否显示高亮背景,默认 False

返回: 应用交互后的图表实例

示例:

from pyantv import Interval
from pyantv.presets import with_element_highlight

chart = Interval.from_data(data=data, x_field_name="category", y_field_name="value")

# 基本高亮(无背景)
with_element_highlight(chart)

# 带背景的高亮
with_element_highlight(chart, background=True)

chart.render("element_highlight.html")


with_element_select

启用元素选中交互,点击选中元素,保持高亮状态。

函数签名:

def with_element_select(chart, background=False)

参数: - chart (Chart): 图表实例 - background (bool, 可选): 是否显示选中背景,默认 False

返回: 应用交互后的图表实例

示例:

from pyantv import Interval
from pyantv.presets import with_element_select

chart = Interval.from_data(data=data, x_field_name="category", y_field_name="value")

# 基本选中(无背景)
with_element_select(chart)

# 带背景的选中
with_element_select(chart, background=True)

chart.render("element_select.html")


with_brush_highlight

启用框选高亮交互,拖拽框选区域内的元素高亮,区域外的元素变暗。

函数签名:

def with_brush_highlight(chart)

参数: - chart (Chart): 图表实例

返回: 应用交互后的图表实例

示例:

from pyantv import Scatter
from pyantv.presets import with_brush_highlight

chart = Scatter.from_data(data=data, x_field_name="x", y_field_name="y")

with_brush_highlight(chart)

chart.render("brush_highlight.html")


with_brush_filter

启用框选过滤交互,拖拽框选区域外的元素隐藏,仅显示区域内的元素。

函数签名:

def with_brush_filter(chart)

参数: - chart (Chart): 图表实例

返回: 应用交互后的图表实例

示例:

from pyantv import Scatter
from pyantv.presets import with_brush_filter

chart = Scatter.from_data(data=data, x_field_name="x", y_field_name="y")

with_brush_filter(chart)

chart.render("brush_filter.html")


with_fisheye

启用鱼眼放大镜交互,鼠标悬停时放大局部区域。

函数签名:

def with_fisheye(chart)

参数: - chart (Chart): 图表实例

返回: 应用交互后的图表实例

示例:

from pyantv import Scatter
from pyantv.presets import with_fisheye

chart = Scatter.from_data(data=data, x_field_name="x", y_field_name="y")

with_fisheye(chart)

chart.render("fisheye.html")


with_slider_filter

启用滑块过滤交互,通过滑块筛选数据范围。

函数签名:

def with_slider_filter(chart, x_axis=True, y_axis=False)

参数: - chart (Chart): 图表实例 - x_axis (bool, 可选): 是否在 x 轴启用滑块,默认 True - y_axis (bool, 可选): 是否在 y 轴启用滑块,默认 False

返回: 应用交互后的图表实例

示例:

from pyantv import Line
from pyantv.presets import with_slider_filter

chart = Line.from_data(data=data, x_field_name="x", y_field_name="y")

# 仅在 x 轴启用滑块
with_slider_filter(chart)

# 在 x 轴和 y 轴都启用滑块
with_slider_filter(chart, x_axis=True, y_axis=True)

# 仅在 y 轴启用滑块
with_slider_filter(chart, x_axis=False, y_axis=True)

chart.render("slider_filter.html")

交互类型对比

Preset 交互类型 触发方式 适用场景
with_tooltip 提示框 鼠标悬停 查看数据详情
with_element_highlight 元素高亮 鼠标悬停 突出显示当前元素
with_element_select 元素选中 鼠标点击 持续高亮选中元素
with_brush_highlight 框选高亮 拖拽框选 局部数据探索
with_brush_filter 框选过滤 拖拽框选 数据筛选
with_fisheye 鱼眼放大 鼠标悬停 局部细节查看
with_slider_filter 滑块过滤 滑块拖动 范围筛选