jQuery 讀取 HTML Table 數據並動態繪製 Highcharts 圖表

需求

頁面已有靜態 Table，點擊按鈕將 Table 數據提取為數組，動態更新 Highcharts 圖表。

核心邏輯

1. 選中 Table 行：$('#tableId tr') 或 document.querySelectorAll('#tableId tbody tr')。
2. 遍歷行，提取單元格文本：$(row).find('td:eq(0)').text()。
3. 按系列分組構建 series 數組。
4. 調用 chart.addSeries() 或重建 Highcharts.Chart。

完整可運行示例

<!DOCTYPE html>
<html><head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head><body>
<button id="btnLoad">載入表格數據</button>
<div id="container" style="width:600px;height:400px"></div>

<table id="dataTable" border="1">
<thead><tr><th>分類</th><th>數值</th></tr></thead>
<tbody>
<tr><td>A</td><td>10</td></tr>
<tr><td>B</td><td>20</td></tr>
<tr><td>C</td><td>15</td></tr>
</tbody></table>

<script>
let chart = Highcharts.chart('container', {
    title: { text: '動態載入演示' },
    xAxis: { type: 'category' },
    series: []
});

$('#btnLoad').click(() => {
    const seriesMap = {};
    $('#dataTable tbody tr').each(function() {
        const name = $(this).find('td:eq(0)').text().trim();
        const value = parseFloat($(this).find('td:eq(1)').text());
        if (!seriesMap[name]) seriesMap[name] = { name, data: [] };
        seriesMap[name].data.push(value);
    });

    // 清空舊系列
    while (chart.series.length) chart.series[0].remove(false);
    // 添加新系列
    Object.values(seriesMap).forEach(s => chart.addSeries(s));
    chart.redraw();
});
</script>
</body></html>

擴展建議

• 多系列：Table 增加「系列名」列，邏輯同理分組。
• 大數據量：考慮 boost.js 模塊或改用 Canvas 渲染庫。
• 實時更新：WebSocket 推送增量數據，調用 series.addPoint()。