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

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

本文介绍如何让 Highcharts 饼图响应 HTML 表格的动态筛选（如搜索/排除），通过监听表格状态变化并调用 series.setData() 实现图表自动重绘。

本文介绍如何让 highcharts 饼图响应 html 表格的动态筛选（如搜索/排除），通过监听表格状态变化并调用 `series.setdata()` 实现图表自动重绘。

在使用 Highcharts 从 HTML 表格渲染饼图时，一个常见痛点是：表格内容经前端搜索、过滤或隐藏行后，图表不会自动刷新——它仍基于初始 DOM 状态生成，而非当前可见数据。要解决这一问题，关键在于将图表更新逻辑与表格筛选行为解耦，并主动触发数据重载。

核心思路：分离数据源与图表渲染

Highcharts 支持从

元素初始化图表（data: { table: 'myTable' }），但该机制仅在初始化时读取一次 DOM。因此，后续 DOM 变化（如 display: none 隐藏行）不会被自动感知。正确做法是：

手动提取当前可见行数据（跳过隐藏行和隐藏列）；
统计目标列（如第12列）中 "success"/"fail" 的频次；
调用 chart.series[0].setData() 更新饼图数据。

示例实现（适配你的场景）

假设你的表格 ID 为 data-table，且需统计第12列（索引为11）的值：

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

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

下载

function updatePieChart() {
  const table = document.getElementById('data-table');
  const rows = Array.from(table.querySelectorAll('tbody tr'))
    .filter(row => getComputedStyle(row).display !== 'none'); // 仅保留可见行

  const successCount = rows.filter(row => {
    const cell = row.cells[11]; // 第12列（0-indexed）
    return cell && cell.textContent.trim().toLowerCase() === 'success';
  }).length;

  const failCount = rows.length - successCount;

  // 更新图表数据（确保 series 存在）
  if (chart && chart.series[0]) {
    chart.series[0].setData([
      { name: 'Success', y: successCount, color: '#28a745' },
      { name: 'Fail', y: failCount, color: '#dc3545' }
    ]);
  }
}

// 在搜索/排除逻辑末尾调用
document.getElementById('search-input').addEventListener('input', updatePieChart);
document.getElementById('exclude-input').addEventListener('input', updatePieChart);