响应式Highcharts在窗口调整大小之前没有正确调整大小

11 回答

• 8

  这可能有所帮助：

  $(Highcharts.charts).each(function(i,chart){
      var height = chart.renderTo.clientHeight; 
      var width = chart.renderTo.clientWidth; 
      chart.setSize(width, height); 
    });
  

  回复于 2024-05-12T10:08:27+08:00
• 0

  您可以添加事件侦听器，以便每次重绘时图表都会调整大小：

  mychart = new Highcharts.stockChart('div',   {
      chart: {
          events: {
              redraw: function(e) {
                  mychart.reflow();
              }
          }
      },
  

  回复于 2024-05-12T10:08:27+08:00
• 0

  对我来说，它需要一些延迟并触发窗口调整大小 .

  window.setTimeout(function(){ $(window).trigger('resize'); }, 500);
  

  回复于 2024-05-12T10:08:27+08:00
• 16

  只需使用 chart.reflow() 功能即可

  回复于 2024-05-12T10:08:27+08:00
• 1

  请使用响应式highcharts查看这些示例：

  http://jsbin.com/anuqav/1/edit

  http://jsfiddle.net/2gtpA/show/

  <div id="container" style="width:100%;margin: 0 auto"></div>
  

  回复于 2024-05-12T10:08:27+08:00
• 38

  我从另一个答案中得到了这个，所以给予一些信用in this question .

  解决方案：在加载图形之后调用 $(window).resize(); （或者在用数据填充它时）

  回复于 2024-05-12T10:08:27+08:00
• 0

  现在排序一个旧主题，但我在IE8中遇到了这个问题 . 在撰写本文时，IE的当前版本是IE10，但我需要使我的网站与早期版本兼容 . 对我有用的解决方案是上述和其他网站的组合，人们谈到了他们实施的解决方案 . 我去了一个settimeout加上一个调整大小并且刚刚执行了IE8，我希望这能帮助像我一样的其他人试图找几个小时的解决方案 .

  您可能会发现 script 部分是您需要的唯一部分 .

  <!--[if IE 8]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script>
      function timeout() {
          $(window).resize();
      }
      window.setTimeout(function() {
          timeout();
      },2000);
    </script>
    <style>
      .highcharts-container{width:100% !important; height:100% !important;}
    </style>
  <![endif]-->
  

  回复于 2024-05-12T10:08:27+08:00
• 0

  您可以将此代码用于示例

  var chart;
  $(function() {
    var newh = $("#container").height();
      $( window ).resize(function() {
      newh = $("#container").height();
      chart.redraw();
      chart.reflow();
    });
    chart = new Highcharts.Chart();
  })
  

  http://jsfiddle.net/Behseini/qheh4w0n/

  回复于 2024-05-12T10:08:27+08:00
• -2

  只有这对我有用

  $(window).resize(function(){ 
      $scope.chartConfig.getChartObj().reflow() 
  });
  

  回复于 2024-05-12T10:08:27+08:00
• 19

  只想添加另一个解决方案：

  $('.chart').highcharts(options, function(chart) {
    setTimeout(function() {
      chart.reflow();
    });
  });
  

  它的作用是在渲染后的下一帧中重新绘制图表 .

  回复于 2024-05-12T10:08:27+08:00
• 2

  $(Highcharts.charts).each(function(i,chart){
      var height = chart.renderTo.clientHeight; 
      var width = chart.renderTo.clientWidth; 
      chart.setSize(width, height);
      });
  

  这个对我有用

  回复于 2024-05-12T10:08:27+08:00