更新 table，因为我们根据某些逻辑点击堆叠高图

Question

这里我想 select 来自 table 的特定行，因为我单击堆叠图。我是 Highcharts 的新手。我想知道我是否可以将堆叠图表中的值传递给 select table 的一个选项，以便 table 为特定堆栈动态更新。有两种不同的 div，一种用于图表，另一种用于 table。如何传递图表的名称或任何属性，比如我想将堆栈的名称属性（即 select 选项的值）传递给 id=[= 的 select 下拉列表21=]。

   $(document).ready(function(){
      $("#myInput").change("keyup", function() {
        var value = $(this).val().toLowerCase();
       id = $(this).closest('tr').attr('id');
        $("#myTable tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });

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,
                        
                    }
                }  
            },
            series: [{
                name: 'Not submitted',
                data: [5, 3, 4, 7, 2]  
            }, {
                name: 'Submitted',
                data: [2, 2, 3, 2, 1]
            }]
        });

<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 id="fd" value="10/05/2018">10/05/2018</option>
    <option id="cd" value="11/05/2018">11/05/2018</option>
    <option id="gh" value="12/05/2018">12/05/2018</option>
    </select>
            <table>
              <thead><tr>
                <th>E-MR No</td>
                <th>Contact Person</td>
                <th>Status</td>
                <th>Intimated</td>
                <th>Medium of Intimation</td>
                <th>Submitted after Dealine</td>
                <th>Date</td>
              </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>

Answer 1

使用point click events 捕获点击。在回调中 this 指的是具有 category 属性的点对象，在您的示例中，它是 select 输入中使用的日期。

在回调中更改 select 的值。

function changeValue(value) {
  $("#myInput").val(value)
  $("#myTable tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
}

绘图选项：

plotOptions: {
  column: {
    stacking: 'normal',
    dataLabels: {
      enabled: true,

    },
    point: {
      events: {
        click() {
          changeValue(this.category)
        }
      }
    }
  }
},

现场示例：https://jsfiddle.net/nwj62h4f/

更新 table，因为我们根据某些逻辑点击堆叠高图

update table as we click on the stacked highchart based on some logic

highcharts

highstock