基于HTML Table的Highcharts饼图搜索后无法自动更新求助

问题根源是饼图仅在初始化时统计了一次全量表格数据，搜索/排除操作过滤行后，没有重新统计可见行的状态数据并更新图表。按以下步骤修改即可解决：

1. 抽离饼图更新逻辑为独立函数 #

把统计状态、更新饼图的代码封装成可复用函数：

let chart; // 全局保存图表实例，方便后续更新

function updatePieChart() {
    let successCount = 0, failCount = 0;
    // 只统计可见行的第12列（状态列）数据
    $('tbody tr:visible').each(function() {
        const status = $(this).find('td').eq(12).text().trim();
        status === 'success' ? successCount++ : failCount++;
    });
    // 调用Highcharts API更新饼图数据
    chart.series[0].setData([
        { name: 'Success', y: successCount, color: '#00FF00' },
        { name: 'Fail', y: failCount, color: '#FF0000' }
    ]);
}

2. 初始化时调用函数生成饼图 #

修改图表初始化代码，用上述函数替代原有的一次性统计逻辑：

chart = Highcharts.chart('container', {
    // 保留原有图表配置（标题、 tooltip、 plotOptions等）不变
    series: [{
        type: 'pie',
        name: 'Test Results',
        data: [] // 初始设为空，由updatePieChart填充数据
    }]
});

// 初始化完成后调用一次，生成初始饼图
updatePieChart();

3. 在搜索/排除操作后触发更新 #

找到搜索框和排除按钮的事件处理代码，在操作完成后调用updatePieChart()：

• 搜索框keyup事件：

$('#searchInput').keyup(function() {
    // 保留原有搜索过滤逻辑不变
    // ...
    // 最后添加饼图更新调用
    updatePieChart();
});

• 排除按钮点击事件：

$('.exclude-btn').click(function() {
    // 保留原有排除过滤逻辑不变
    // ...
    // 最后添加饼图更新调用
    updatePieChart();
});

关键说明 #

• 必须筛选tr:visible行：搜索/排除后隐藏的行不应计入饼图统计
• 使用setData()是Highcharts官方推荐的动态更新图表数据的方式
• 原监听代码未生效，是因为没有绑定到搜索/排除的触发事件，也没有重新统计可见行的实时数据

内容的提问来源于stack exchange，提问作者Roger McCarrick