如何实现Bootstrap Table选中行数据在Highcharts图表中动态展示（初始图表为空）

Got it, let's break down how to build this feature exactly as you described. We'll start with an empty Highcharts chart on page load, then update it in real-time whenever a row in the Bootstrap Table is checked (or remove the data if unchecked).

Step 1: Initialize an Empty Highcharts Chart #

First, we'll set up the Highcharts instance with an empty series array—this ensures the chart area is blank when the page loads. We'll also store a reference to the chart so we can modify it later.

// Initialize empty Highcharts chart
const chart = Highcharts.chart('chart-container', {
    title: { text: 'Dynamic Data Visualization' },
    xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] }, // Adjust based on your data
    yAxis: { title: { text: 'Value' } },
    series: [] // Empty series array for initial load
});

Step 2: Listen to Bootstrap Table Check Events #

Bootstrap Table provides built-in events for checkbox interactions: check.bs.table and uncheck.bs.table. We'll use these to trigger updates to the chart whenever a row is selected or deselected.

Key Logic: #

• When a row is checked: Add its data as a new series to the chart
• When a row is unchecked: Remove the corresponding series from the chart

// Listen for row check event
$('#table').on('check.bs.table', function(e, row) {
    // Add the row's data as a new series to the chart
    chart.addSeries({
        name: row.name, // Adjust to match your table's column name for series labels
        data: [row.jan, row.feb, row.mar, row.apr, row.may] // Adjust to match your data columns
    });
});

// Listen for row uncheck event
$('#table').on('uncheck.bs.table', function(e, row) {
    // Find the series by name and remove it from the chart
    const seriesToRemove = chart.series.find(series => series.name === row.name);
    if (seriesToRemove) {
        seriesToRemove.remove();
    }
});

Step 3: Complete Working Code Example #

Here's the full HTML code combining Bootstrap Table, Highcharts, and the above functionality. Make sure to adjust the table columns and data structure to match your actual dataset:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Chart with Bootstrap Table</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <!-- Bootstrap Table CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
    <!-- Highcharts CSS -->
    <style>
        #chart-container {
            height: 400px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h2>Data Table</h2>
        <table id="table" data-toggle="table" data-checkbox="true">
            <thead>
                <tr>
                    <th data-field="state" data-checkbox="true"></th>
                    <th data-field="name">Series Name</th>
                    <th data-field="jan">January</th>
                    <th data-field="feb">February</th>
                    <th data-field="mar">March</th>
                    <th data-field="apr">April</th>
                    <th data-field="may">May</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td>Product A</td>
                    <td>10</td>
                    <td>15</td>
                    <td>12</td>
                    <td>18</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td></td>
                    <td>Product B</td>
                    <td>8</td>
                    <td>12</td>
                    <td>14</td>
                    <td>16</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td></td>
                    <td>Product C</td>
                    <td>15</td>
                    <td>18</td>
                    <td>22</td>
                    <td>25</td>
                    <td>28</td>
                </tr>
            </tbody>
        </table>

        <h2>Visualization Chart</h2>
        <div id="chart-container"></div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap Table JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
    <!-- Highcharts JS -->
    <script src="https://code.highcharts.com/highcharts.js"></script>

    <script>
        // Initialize empty Highcharts chart
        const chart = Highcharts.chart('chart-container', {
            title: { text: 'Dynamic Data Visualization' },
            xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
            yAxis: { title: { text: 'Sales Value' } },
            series: []
        });

        // Handle row check event
        $('#table').on('check.bs.table', function(e, row) {
            chart.addSeries({
                name: row.name,
                data: [parseInt(row.jan), parseInt(row.feb), parseInt(row.mar), parseInt(row.apr), parseInt(row.may)]
            });
        });

        // Handle row uncheck event
        $('#table').on('uncheck.bs.table', function(e, row) {
            const series = chart.series.find(s => s.name === row.name);
            if (series) {
                series.remove();
            }
        });
    </script>
</body>
</html>

Notes for Customization #

• Adjust the xAxis.categories and data fields (like row.jan, row.feb) to match your actual dataset structure.
• If your table uses remote data, you can use the load-success.bs.table event to initialize the chart with an empty state after data loads.
• You can customize the chart styling (colors, tooltips, etc.) by adding more options to the Highcharts initialization object.

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