如何用DataTable+Highcharts Pie Chart统计STATUS列值的出现次数

完整实现代码 #

HTML结构 #

<!-- DataTables 样式 -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<!-- Highcharts 样式 -->
<link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">

<!-- 表格容器 -->
<table id="dataTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>DATE</th>
            <th>STATUS</th>
            <!-- 其他列根据实际需求添加 -->
        </tr>
    </thead>
    <tbody>
        <!-- 数据行示例 -->
        <tr>
            <td>2024-05-20</td>
            <td>success</td>
        </tr>
        <tr>
            <td>2024-05-20</td>
            <td>success</td>
        </tr>
        <tr>
            <td>2024-05-20</td>
            <td>fail</td>
        </tr>
        <tr>
            <td>2024-05-20</td>
            <td>aborted</td>
        </tr>
        <!-- 更多数据行 -->
    </tbody>
</table>

<!-- 饼图容器 -->
<div id="pieChart" style="height: 400px; margin-top: 20px;"></div>

<!-- 引入依赖脚本 -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

JavaScript核心逻辑 #

$(document).ready(function() {
    // 初始化DataTables
    const table = $('#dataTable').DataTable();

    // 定义统计STATUS数据的函数
    function getStatusStats() {
        // 获取表格中已应用搜索过滤的所有行的STATUS列数据
        const statusData = table.column(1, { search: 'applied' }).data().toArray();
        
        // 初始化统计对象
        const stats = {
            success: 0,
            fail: 0,
            aborted: 0
        };

        // 遍历数据统计次数
        statusData.forEach(status => {
            if (stats.hasOwnProperty(status)) {
                stats[status]++;
            }
        });

        // 转换为Highcharts饼图需要的格式
        return Object.entries(stats).map(([name, y]) => ({ name, y }));
    }

    // 初始化饼图
    const chart = Highcharts.chart('pieChart', {
        chart: {
            type: 'pie'
        },
        title: {
            text: 'STATUS 统计'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> ({point.y} 次)'
        },
        series: [{
            name: '次数',
            data: getStatusStats()
        }]
    });

    // 监听搜索事件，搜索后更新饼图
    $('#dataTable_filter input').on('keyup change', function() {
        chart.series[0].setData(getStatusStats());
    });
});

关键说明 #

• 数据统计逻辑：getStatusStats函数会抓取当前表格中经过搜索过滤的所有行的STATUS数据，精准统计success、fail、aborted的出现次数，并转换成Highcharts饼图兼容的数据格式。
• 搜索联动：绑定DataTables自带搜索框的事件，每次输入搜索内容（比如今日日期）后，饼图会自动同步更新统计结果，保证图表和表格数据一致。
• 新手适配：代码结构清晰，注释明确，你只需要替换表格内的实际业务数据（可以通过AJAX加载后端数据，或直接填充静态数据）即可快速复用。

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