如何將頁面中 List 數據傳遞給 jQuery 與 Highcharts 繪圖

前言

在 Web 開發中，常遇到需要將後端傳遞的 List 數據（或前端表格數據）動態綁定到 JavaScript 圖表庫（如 Highcharts）的場景。本文將通過一個完整的範例，示範如何使用 jQuery 遍歷 HTML 表格，提取數據並動態渲染 Highcharts 圖表。

原始問題

使用者提供了一個包含兩個 Highcharts 圖表容器與一個數據表格的 HTML 頁面。第一個圖表初始為空，第二個圖表寫死了一組數據。目標是將表格中的「Time」作為 X 軸類別，「Date」作為系列數據，動態填充第一個圖表。

解決方案：遍歷表格賦值給 Highcharts

核心思路：給表格加上 id="tb"，在 $(function(){}) 中用 jQuery 選取器遍歷 tr 與 td，將所需欄位 push 進 categories 與 data 陣列，最後傳入 Highcharts 設定物件。

關鍵代碼片段

var tb = $('#tb');
var title = tb.find('tr:eq(1) td').html(); // 取第二行第一格作為標題
var series = [{
    name: tb.find('tr:eq(0) td:eq(2)').html(), // Time
    data: []
}, {
    name: tb.find('tr:eq(0) td:eq(3)').html(), // Date
    data: []
}];

tb.find('tr:gt(0)').each(function () {
    series[0].data.push(this.cells[2].innerHTML); // Time 當作 X 軸類別
    series[1].data.push(parseFloat(this.cells[3].innerHTML)); // Date 當作數值
});

$('#container').highcharts({
    title: { text: title },
    xAxis: { title: { text: series[0].name }, categories: series[0].data },
    yAxis: { title: { text: '數據' } },
    series: [series[1]]
});

完整可執行範例

以下為整合後的完整 HTML，可直接存為 .html 於瀏覽器開啟測試：

<!doctype html>
<html>
<head>
<script src="https://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
    var tb = $('#tb'),
        title = tb.find('tr:eq(1) td').html();
    var series = [{
        name: tb.find('tr:eq(0) td:eq(2)').html(),
        data: []
    }, {
        name: tb.find('tr:eq(0) td:eq(3)').html(),
        data: []
    }];
    tb.find('tr:gt(0)').each(function () {
        series[0].data.push(this.cells[2].innerHTML);
        series[1].data.push(parseFloat(this.cells[3].innerHTML));
    });
    $('#container').highcharts({
        title: { text: title },
        xAxis: { title: { text: series[0].name }, categories: series[0].data },
        yAxis: { title: { text: '數據' } },
        series: [series[1]]
    });
});
</script>
</head>
<body>
<h1>曲線圖</h1>
<div id="container" style="width:300px;height:300px;float:left;"></div>
<div id="container2" style="width:300px;height:300px;float:left;"></div>
<table border="1" align="left" id="tb">
<tr><td>CName</td><td>EName</td><td>Time</td><td>Date</td></tr>
<tr><td>血小板</td><td>HPLT</td><td>1</td><td>7.0</td></tr>
<tr><td>血小板</td><td>HPLT</td><td>2</td><td>6.9</td></tr>
<tr><td>血小板</td><td>HPLT</td><td>3</td><td>9.5</td></tr>
</table>
</body>
</html>

常見坑點提醒

• 表格必須有 id 方便選取；若無 id 可用 $('table:first') 等替代。
• parseFloat 確保數值型別，避免字串導致圖表異常。
• 若表格列數動態變化，建議先檢查 cells.length 再取值。

總結

透過 jQuery 遍歷 DOM 表格，即可將頁面現有結構化數據無縫接入 Highcharts，無需額外 AJAX 請求，適合後端已渲染表格的舊專案快速加圖表需求。