点击堆叠Highcharts图表联动更新表格与下拉框的实现方案

没问题，我来帮你搞定这个需求！核心就是给柱状图添加点击事件，同步下拉框选中状态，再联动表格筛选。下面是修改后的完整代码和关键说明：

修改后的完整代码 #

HTML部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div class="e_container">
  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
<hr>
<div class="e_container">
  <h5>Information</h5>
  <select id="myInput">
    <option value="">Select</option>
    <option value="10/05/2018">10/05/2018</option>
    <option value="11/05/2018">11/05/2018</option>
    <option value="12/05/2018">12/05/2018</option>
    <option value="13/05/2018">13/05/2018</option>
    <option value="14/05/2018">14/05/2018</option>
  </select>
  <table>
    <thead>
      <tr>
        <th>E-MR No</th>
        <th>Contact Person</th>
        <th>Status</th>
        <th>Intimated</th>
        <th>Medium of Intimation</th>
        <th>Submitted after Dealine</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td>25</td>
        <td>shahnawaz</td>
        <td>Pending</td>
        <td>No</td>
        <td>N/A</td>
        <td>N/A</td>
        <td>10/05/2018</td>
      </tr>
      <tr>
        <td>185</td>
        <td>Vidhya</td>
        <td>Pending</td>
        <td>Yes</td>
        <td>SMS</td>
        <td>N/A</td>
        <td>11/05/2018</td>
      </tr>
      <tr>
        <td>165</td>
        <td>Akshay</td>
        <td>Submitted</td>
        <td>Yes</td>
        <td>SMS</td>
        <td>N/A</td>
        <td>12/05/2018</td>
      </tr>
      <tr>
        <td>967</td>
        <td>Vidhya</td>
        <td>Pending</td>
        <td>Yes</td>
        <td>SMS</td>
        <td>Yes</td>
        <td>13/05/2018</td>
      </tr>
      <tr>
        <td>356</td>
        <td>Rakesh</td>
        <td>Pending</td>
        <td>Yes</td>
        <td>SMS</td>
        <td>N/A</td>
        <td>14/05/2018</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript部分 #

$(document).ready(function(){
  // 下拉框筛选逻辑
  $("#myInput").on("change", function() {
    const selectedDate = $(this).val().trim();
    $("#myTable tr").each(function() {
      // 获取当前行的日期列（第7列，索引6）
      const rowDate = $(this).find('td').eq(6).text().trim();
      // 无选中则显示所有行，否则匹配日期
      $(this).toggle(selectedDate === "" || rowDate === selectedDate);
    });
  });

  // 初始化Highcharts
  Highcharts.chart('container', {
    colors: ['red','green'],
    chart: { type: 'column' },
    title: { text: 'Status of E-Muster Date Wise' },
    xAxis: { 
      categories: ['10/05/2018', '11/05/2018', '12/05/2018', '13/05/2018', '14/05/2018'] 
    },
    yAxis: {
      min: 0,
      title: { text: 'Total E-Muster Issued' },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      align: 'right', x: -30, verticalAlign: 'top', y: 25,
      floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC', borderWidth: 1, shadow: false
    },
    tooltip: {
      headerFormat: '<b>{point.x}</b><br/>',
      pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: { enabled: true },
        // 添加柱子点击事件
        point: {
          events: {
            click: function() {
              const clickedDate = this.x;
              // 设置下拉框选中对应日期
              $("#myInput").val(clickedDate);
              // 手动触发下拉框change事件，触发筛选
              $("#myInput").trigger('change');
            }
          }
        }
      }
    },
    series: [
      { name: 'Not submitted', data: [5, 3, 4, 7, 2] },
      { name: 'Submitted', data: [2, 2, 3, 2, 1] }
    ]
  });
});

关键修改说明 #

1. 添加Highcharts点击事件：在plotOptions.column.point.events里定义click函数，点击柱子时获取对应的日期this.x，同步到下拉框并触发筛选。
2. 优化表格筛选逻辑：从原来的模糊搜索改成精准匹配日期列，避免其他列的文本干扰筛选结果，同时修复了原代码中事件绑定的错误写法。
3. 补全下拉框选项：把图表里所有日期都添加到下拉框，确保点击任何柱子都能对应选中。

内容的提问来源于stack exchange，提问作者Shahnawaz Khan