如何修改脚本默认隐藏wpDataTables中Chart.js指定数据集（ID2，SPM）

我之前也处理过类似的wpDataTables+Chart.js自定义需求，刚好可以给你一个直接能用的解决方案。核心思路是监听wpDataTables的图表初始化事件，找到目标图表实例后，定位到标签为“SPM”的数据集并设置默认隐藏。

修改后的完整脚本 #

// 监听wpDataTables图表初始化完成事件
document.addEventListener('wpDataTablesAfterDraw', function(event) {
    // 只处理ID为2的图表
    if (event.detail.tableID === 2) {
        // 获取当前图表的Chart.js实例
        const chartInstance = event.detail.chart;
        
        // 遍历所有数据集，找到标签为"SPM"的那一个
        chartInstance.data.datasets.forEach(function(dataset) {
            if (dataset.label === 'SPM') {
                // 设置该数据集默认隐藏
                dataset.hidden = true;
            }
        });
        
        // 强制图表重新渲染，生效隐藏设置
        chartInstance.update();
    }
});

关键部分说明 #

• 事件监听：wpDataTablesAfterDraw是wpDataTables官方提供的事件，确保我们在图表完全渲染后再修改配置，避免找不到实例的问题。
• 图表ID筛选：通过event.detail.tableID === 2精准定位到你需要修改的目标图表，不会影响其他图表。
• 数据集定位：遍历chartInstance.data.datasets，匹配标签'SPM'（注意大小写敏感，如果你的标签是大小写混合，要对应调整）。
• 更新图表：修改hidden属性后调用chartInstance.update()，让Chart.js重新渲染图表，应用隐藏设置。

额外注意事项 #

• 如果你的图表有多个标签为“SPM”的数据集，这段脚本会把它们全部隐藏；如果只想隐藏其中一个，可以结合dataset.index或者其他属性做更精准的筛选。
• 把这段脚本放到你的WordPress主题的functions.php（通过wp_enqueue_script加载），或者直接放到wpDataTables的自定义JS设置区域（插件后台通常有专门的自定义脚本输入框）。

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