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>

使用代码

将所有高级图表渲染到容器中

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

  var chart_1 = new Highcharts.StockChart(chart_container_opt_1);

和图表_2的相似表示，容器_2和图表_3表示容器_3

Answer 1

您可以使用高图功能： -

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/

Answer 2

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

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

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

2 个答案: