highcharts div在点击时调整为最小值和最大值答案

【问题标题】：highcharts div resize to min and max on clickhighcharts div在点击时调整为最小值和最大值
【发布时间】：2014-07-25 14:57:32
【问题描述】：

我有一个页面，其中显示了不同组件的多个图表。我正在使用高图表。下面是代码。我该如何设置它，以便当用户单击 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_2 的类似，chart_3 的 container_3

【问题讨论】：

标签： javascript jquery highcharts minimize maximize

【解决方案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/

【讨论】：

【解决方案2】：

第二种解决方案是使用highslide，它允许在弹出窗口中打开图表。

示例：http://jsfiddle.net/roadrash/GqhEX/

【讨论】：