Highcharts 饼图基于 HTML 表格的动态自动更新教程-js教程-PHP中文网

Highcharts 饼图基于 HTML 表格的动态自动更新教程

本文详解如何让 Highcharts 饼图随 HTML 表格筛选（搜索/排除）实时重绘，通过监听表格状态变化并调用 series.setData() 更新图表数据。

本文详解如何让 highcharts 饼图随 html 表格筛选（搜索/排除）实时重绘，通过监听表格状态变化并调用 `series.setdata()` 更新图表数据。

在使用 Highcharts 基于 HTML 表格渲染饼图时，一个常见痛点是：表格内容经前端搜索或过滤后，图表仍显示原始全量数据，无法自动响应变化。根本原因在于 Highcharts 默认仅在初始化时解析一次表格，后续 DOM 变更不会触发图表重绘。

解决的关键在于主动触发数据更新——而非依赖自动绑定。你需要：

提取当前可见行中目标列（如第 12 列，即 success/fail 状态列）的有效值；
统计 success / fail 的频次，构造符合饼图格式的数据数组（如 [{name: 'Success', y: 12}, {name: 'Fail', y: 3}]）；
调用 chart.series[0].setData(newData) 强制刷新图表。

以下是一个完整可集成的更新逻辑示例（适配你 JSFiddle 中的结构）：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

// 假设 chart 已初始化为全局变量 `myChart`
function updatePieFromTable() {
  const table = document.getElementById('data-table'); // 替换为你的表格 ID
  const rows = Array.from(table.querySelectorAll('tbody tr'));
  const successCount = rows.filter(row => 
    row.style.display !== 'none' && 
    row.cells[12]?.textContent.trim().toLowerCase() === 'success'
  ).length;
  const failCount = rows.filter(row => 
    row.style.display !== 'none' && 
    row.cells[12]?.textContent.trim().toLowerCase() === 'fail'
  ).length;

  const newData = [];
  if (successCount > 0) {
    newData.push({ name: 'Success', y: successCount, color: '#28a745' });
  }
  if (failCount > 0) {
    newData.push({ name: 'Fail', y: failCount, color: '#dc3545' });
  }

  if (myChart && myChart.series[0]) {
    myChart.series[0].setData(newData, true); // 第二个参数 true 表示重绘
  }
}

// 在搜索/排除逻辑末尾调用（例如 searchInput.addEventListener('input', ...) 内）
// 或绑定到你的筛选按钮点击事件：
document.getElementById('search-btn').addEventListener('click', updatePieFromTable);
document.getElementById('exclude-btn').addEventListener('click', updatePieFromTable);

⚠️ 重要注意事项：

确保 updatePieFromTable() 在表格 DOM 状态已更新（即 display: none 已应用）之后执行；
若使用 jQuery DataTables 或其他表格插件，请改用其提供的 API（如 table.rows({ search: 'applied' }).nodes()）获取可见行；
setData() 支持动画（默认开启），如需禁用可传 { animation: false } 作为第三个参数；
隐藏列（如第 0 列和第 12 列）不影响 DOM 结构，row.cells[12] 仍可安全访问。

通过将数据提取与图表更新解耦，并在每次筛选操作后显式调用 setData()，即可实现“搜索即更新”的交互体验。这不仅是 Highcharts 最佳实践，也保证了性能可控与逻辑清晰。