You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

在ipywidgets中使用枚举作为下拉选项,实现可排序柱状图交互

实现基于ipywidgets Dropdown的交互式排序柱状图

没问题!我来一步步帮你完成这个功能开发,结合你已经定义的SORT_TYPE枚举和Dropdown组件,整个流程很清晰,下面是完整的实现方案:

1. 导入必要的库

首先我们需要导入用到的工具库,包括ipywidgets、matplotlib(用来画柱状图)、enum(你的枚举类依赖),用pandas处理数据会更便捷,也一起加上:

import ipywidgets as widgets
from enum import Enum
import matplotlib.pyplot as plt
import pandas as pd

2. 完善排序类型枚举类

补全你定义的SORT_TYPE枚举,确保所有排序选项都对应到位:

class SORT_TYPE(Enum):
    ALPHABETICAL = 1
    ASCENDING = 2
    DESCENDING = 3
    UNSORTED = 4

3. 创建Dropdown交互组件

完善Dropdown的选项配置,把所有排序类型都添加进去,同时优化显示效果:

ordering_dropdown = widgets.Dropdown(
    options={
        'Alphabetical': SORT_TYPE.ALPHABETICAL,
        'Ascending (by value)': SORT_TYPE.ASCENDING,
        'Descending (by value)': SORT_TYPE.DESCENDING,
        'Unsorted': SORT_TYPE.UNSORTED
    },
    value=SORT_TYPE.UNSORTED,  # 默认显示未排序状态
    description='Sort by:',
    style={'description_width': 'initial'}  # 让描述文字完整显示,不会被截断
)

4. 准备示例数据(替换为你的真实数据即可)

我们用一组水果销量数据做演示,你可以直接替换成自己的业务数据集:

# 示例数据:水果名称与对应销量
data = {
    'Fruit': ['Banana', 'Apple', 'Orange', 'Mango', 'Grape'],
    'Sales': [120, 150, 90, 200, 80]
}
df = pd.DataFrame(data)

5. 定义排序逻辑函数

根据选中的SORT_TYPE枚举值,对数据执行对应的排序操作:

def sort_data(sort_type):
    if sort_type == SORT_TYPE.ALPHABETICAL:
        # 按类别名称的字母顺序排序
        return df.sort_values('Fruit', ascending=True)
    elif sort_type == SORT_TYPE.ASCENDING:
        # 按数值升序排序
        return df.sort_values('Sales', ascending=True)
    elif sort_type == SORT_TYPE.DESCENDING:
        # 按数值降序排序
        return df.sort_values('Sales', ascending=False)
    elif sort_type == SORT_TYPE.UNSORTED:
        # 返回原始未排序的数据
        return df.copy()

6. 定义交互式绘图函数

这个函数会接收Dropdown选中的排序类型,先完成数据排序,再生成对应的柱状图:

def update_bar_chart(sort_type):
    sorted_df = sort_data(sort_type)
    
    # 绘制柱状图
    plt.figure(figsize=(8, 5))
    bars = plt.bar(sorted_df['Fruit'], sorted_df['Sales'], color='skyblue')
    
    # 给每个柱子添加数值标签,提升可读性
    for bar in bars:
        height = bar.get_height()
        plt.text(bar.get_x() + bar.get_width()/2., height,
                 f'{height}',
                 ha='center', va='bottom')
    
    plt.xlabel('Fruit Category')
    plt.ylabel('Sales Volume')
    plt.title('Fruit Sales (Sorted by Selected Order)')
    plt.xticks(rotation=45)
    plt.tight_layout()  # 自动调整布局,避免标签被遮挡
    plt.show()

7. 绑定组件与函数,启动交互

用ipywidgets.interact把Dropdown和绘图函数绑定起来,这样每次切换下拉选项,图表就会自动更新:

widgets.interact(update_bar_chart, sort_type=ordering_dropdown);

额外说明

  • 如果你不用pandas,也可以用原生Python列表处理排序逻辑,核心思路一致:根据选中的类型对标签和对应数值做同步排序。
  • 要是在Jupyter Notebook中运行,确保已经启用ipywidgets扩展(未启用的话可以运行!jupyter nbextension enable --py widgetsnbextension)。
  • 你可以根据需求自由调整图表样式,比如柱子颜色、图表尺寸、标签内容等。

内容的提问来源于stack exchange,提问作者Lnr

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.22 07:50:21