javascript - 点击时 highcharts div 调整为最小值和最大值

Question

我有一个页面，其中显示了不同组件的多个图表。我正在使用 Highcharts 。下面是代码。我如何设置它，以便当用户单击 div 时，它会将该图形调整为整个页面，然后单击会将其恢复为原始大小。基本上是使用 javascript 或 jquery 在最大屏幕和原始大小之间切换每次点击。

 <div id="graph_id"></div>

  <div id="top_container">
    <div id="container_1" style="float:left ; height: 50%; width:32%; min-width: 200px; background:#000000; padding:5px;"></div>
    <div id="container_2"    style="float:left ; height: 50%; width:32%; min-width: 200px; background:#000000; padding:5px;"></div>
    <div id="container_3" style="float:left ; height: 50%; width:32%; min-width: 200px; background:#000000; padding:5px;"></div>
  </div>
</div>

所有的 Highcharts 都使用代码呈现给容器

 var chart_container_opt_1 = {
        chart: {
            renderTo: 'container_1',
            .....

  var chart_1 = new Highcharts.StockChart(chart_container_opt_1);

对于 chart_2 和 container_3 的 container_2 和 chart_3 类似

Answer 1

您可以使用 highchart 函数:-

chart.setSize (width,height);

在每次点击时计算新的高度和宽度，您可以使用 jquery height() 和 width() 函数轻松找到它们。然后用新参数调用上面的函数。 看看

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-setsize-button/