Javascript 调整表中多个HighChart的大小

我有下面的html表格设置

<div>
    <table>
        <tr>
            <td class='plot1'>Some data 1</td>
            <td class='plot2'>Some data 2</td>
        </tr>
        <tr>
            <td class='plot3'>Some data 3</td>
            <td class='plot4'>Some data 4</td>
        </tr>
    </table>
</div>

双击4个表格单元格中的任何一个（这些单元格将包含图表对象），我希望展开该单元格以填充父div并隐藏其他3个单元格。在随后的双击中，我希望表格具有其原始设置

这里是jQuery，只需双击plot 1

$('td.plot1').dblclick(function(e) {
  if (e.ctrlKey) {
    if ($(this).closest('table').children('tbody').children('tr').children('td.plot2,td.plot3,td.plot4').is(":visible")) {
      $(this).closest('table').children('tbody').children('tr').children('td.plot1').height('100%');

    } else {
      $(this).closest('table').children('tbody').children('tr').children('td.plot1').height('50%');

    }

    $(this).closest('table')
      .children('tbody')
      .children('tr')
      .children('td.plot2,td.plot3,td.plot4')
      .toggle();

  }
});

可以找到上述工作示例

我在几件事上遇到了麻烦。很明显，我希望能够用一个jQuery来双击任何表单元格，而不是每个单元格用一个jQuery。在我将highcharts对象引入每个表单元格之前，此行为一直正常，然后在尝试“最小化”回其原始大小时，单击的绘图的高度不会改变

---

任何帮助，或不同的方法将不胜感激，因为我似乎被困在这个愚蠢的问题

High charts api具有类似于

重画

的功能，这将帮助您在容器大小更改时重画图表。有一个很好的演示可以帮助您实现它

---

你也可以浏览官方文档

Hi@Bennett Jackson，你能给我提供一个Highcharts的实例吗？

$('td.plot1').dblclick(function(e) {
  if (e.ctrlKey) {
    if ($(this).closest('table').children('tbody').children('tr').children('td.plot2,td.plot3,td.plot4').is(":visible")) {
      $(this).closest('table').children('tbody').children('tr').children('td.plot1').height('100%');

    } else {
      $(this).closest('table').children('tbody').children('tr').children('td.plot1').height('50%');

    }

    $(this).closest('table')
      .children('tbody')
      .children('tr')
      .children('td.plot2,td.plot3,td.plot4')
      .toggle();

  }
});