Javascript 带highcharts的全屏面板引导（响应）

我有几个（引导）面板，我想有机会显示这个全屏。这些面板中有高图表。问题是，当您在全屏模式下运行时，高位图表的大小不适应。是否有可能自动调整缩放比例，使比率保持不变

在这个例子中，我从可以看到问题的地方开始

HTML

CSS

希望有人能在这方面进一步帮助我。非常感谢。

这就是你想要的吗？

$（文档）.ready（函数（）{
//全屏切换
$（“#面板全屏”）。单击（功能（e）{
e、 预防默认值（）；
var$this=$（this）；
if（$this.children（'i'）.hasClass（'glyphicon-resize-full'））{
$this.children（'i'）.removeClass（'glyphicon-resize-full'）；
$this.children（'i'）.addClass（'glyphicon-resize-small'）；
}else if（$this.children（'i'）.hasClass（'glyphicon-resize-small'））{
$this.children（'i'）.removeClass（'glyphicon-resize-small'）；
$this.children（'i'）.addClass（'glyphicon-resize-full'）；
}
$（this）.closest（'.panel'）.toggleClass（'panel-fullscreen'）；
});
});
Highcharts.chart（'容器'{
标题：{
正文：“2010-2016年太阳能行业就业增长”
},
副标题:{
文本：“来源：thesolarfoundation.com”
},
亚克斯：{
标题：{
文本：“员工人数”
}
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“中间”
},
打印选项：{
系列：{
标签：{
允许的连接器：false
},
起点：2010年
}
},
系列：[{
名称：'安装'，
数据：[4394352503571776965897031119931137133154175]
}, {
名称：“制造业”，
数据：[24916、24064、29742、29851、32490、30282、38121、40434]
}, {
名称：“销售与分销”，
数据：[117441772216051977120185243773214739387]
}, {
名称：“项目开发”，
数据：[null，null，798812169151121522440034227]
}, {
名称：'其他'，
数据：[129085948810511248898918161827418111]
}],
响应：{
规则：[{
条件：{
最大宽度：500
},
图表选项：{
图例：{
布局：“水平”，
对齐：'居中'，
垂直排列：“底部”
}
}
}]
}
});
。面板操作{
利润上限：-20px；
页边距底部：0；
文本对齐：右对齐；
}
.小组行动a{
颜色：#333；
}
.面板全屏{
显示：块；
z指数：9999；
位置：固定；
宽度：100%；
身高：100%；
排名：0；
右：0；
左：0；
底部：0；
溢出：自动；
}
.面板全屏。highcharts容器{
宽度：100%！重要；
身高：100%！重要；
}
.panel全屏.highcharts容器，.panel全屏.highcharts根目录{
宽度：100%！重要；
身高：100%！重要；
}

全屏切换
小组标题



同一天的知识是不存在的，而存在的则是不存在的性骚扰，知识是不存在的。我是第一个被责骂的人，他的谎言表明他是一个无足轻重的人。面对竞争对手的vivendo Consultatu，你是一个十足的percipitur。这是一个敏感的问题，是一个有效的问题，没有精英剧本。在sed有一个justo semper，diam epicurei percipitur。
如果纵横比是固定的，您可能可以使用svg上的viewbox属性来处理这个问题。但在这种情况下，我会选择将Highcharts draw封装在它自己的函数中，并在加载时和单击按钮时调用它。这将重新绘制图表，这样当它调整大小时，您就不会出现扭曲/放大的外观，相反，您将绘制最适合新空间的图表

如果您不喜欢重画转换，您可以有一个绘图函数（最初执行）和一个不带转换的重画函数（在#面板全屏单击处理程序中执行）

使用“仅调整大小”时，通常会出现重叠的记号/形状，这可以通过在新空间内按比例绘制来避免


$（文档）.ready（函数（）{
//全屏切换
$（“#面板全屏”）。单击（功能（e）{
e、 预防默认值（）；
var$this=$（this）；
if（$this.children（'i'）.hasClass（'glyphicon-resize-full'））{
$this.children（'i'）.removeClass（'glyphicon-resize-full'）；
$this.children（'i'）.addClass（'glyphicon-resize-small'）；
}else if（$this.children（'i'）.hasClass（'glyphicon-resize-small'））{
$this.children（'i'）.removeClass（'glyphicon-resize-small'）；
$this.children（'i'）.addClass（'glyphicon-resize-full'）；
}
$（this）.closest（'.panel'）.toggleClass（'panel-fullscreen'）；
图纸（）；
});
});
图纸（）；
函数绘图图（）{
Highcharts.chart（'容器'{
标题：{
正文：“2010-2016年太阳能行业就业增长”
},
副标题:{
文本：“来源：thesolarfoundation.com”
},
亚克斯：{
标题：{
文本：“员工人数”
}
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“中间”
},
打印选项：{
系列：{
标签：{
允许的连接器：false
},
起点：2010年
}
},
系列：[{
名称：'安装'，
数据：[4394352503571776965897031119931137133154175]
}, {
名称：“制造业”，
数据：[24916、24064、29742、29851、32490、30282、38121、40434]
}, {
名称：“销售与分销”，
数据：[117441772216051977120185243773214739387]
}, {
名称：“项目开发”，
数据：[null，null，798812169151121522440034227]
}, {
名称：'其他'，
数据：[1290859488105，
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-xs-8">
      <h2>Fullscreen toggle</h2>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
          <ul class="list-inline panel-actions">
            <li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
          </ul>
        </div>
        <div class="panel-body">
          <div class="col-lg-8 col-md-8 col-xs-8">
            <div id="container"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-xs-4">
            <h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus,
              ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  //Toggle fullscreen
  $("#panel-fullscreen").click(function(e) {
    e.preventDefault();

    var $this = $(this);

    if ($this.children('i').hasClass('glyphicon-resize-full')) {
      $this.children('i').removeClass('glyphicon-resize-full');
      $this.children('i').addClass('glyphicon-resize-small');
    } else if ($this.children('i').hasClass('glyphicon-resize-small')) {
      $this.children('i').removeClass('glyphicon-resize-small');
      $this.children('i').addClass('glyphicon-resize-full');
    }
    $(this).closest('.panel').toggleClass('panel-fullscreen');
  });
});



Highcharts.chart('container', {

  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },

  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },

  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

.panel-actions {
  margin-top: -20px;
  margin-bottom: 0;
  text-align: right;
}

.panel-actions a {
  color: #333;
}

.panel-fullscreen {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}