Question

这里我想在单击堆叠图表时从表格中选择特定行。我是Highcharts的新手。我想知道我是否可以从堆栈图表中传递值来选择表的选项，以便为特定堆栈动态更新表。图表有两种不同的div，另一种用于表。如何传递图表的名称或任何属性，比如说我想将选择选项的值的堆栈的name属性传递给id =“myInput”的select下拉列表。

   $(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的值。

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

plotOptions：

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

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

live exmaple：https://jsfiddle.net/nwj62h4f/

当我们根据某些逻辑单击堆叠的高图时更新表

1 个答案: