Highcharts大小不上div.animate（）改变

Question

我有以下HTML：

<div class="chartDiv"> 
    <div id="chartContainer"></div> 
</div> 

和CSS：

$("#chartContainer").highcharts({ 
    .... 
}); 

：

.chartDiv { 
    position: absolute; 
    height: 1280px; 
    width: 720px; 
    top:0px; 
    left:0px; 
} 
#chartContainer { 
    position:absolute; 
    height:100%; 
    width:100%; 
} 

我有一个Highchart通过启动

现在我想改变chartDiv的大小和位置：

$(".chartDiv").animate({ 
    top: "100px", 
    left: "100px", 
    width: "640px", 
    height: "360px" 
)}; 

正如预期的那样，chartContainer会相应地更改其大小，但Highcart的大小保持不变。我解释说，如果没有其他声明被声明，它会自动更改为其父级大小，但事实并非如此。这是由于使用.animate图表不反应？理想情况下，由于chartDiv具有边界，因此该图表将与其父项一起生成动画，如果它首先进行动画处理，然后是图表（现在甚至不是这种情况），则该图表看起来很糟糕。

Answer 1

如果您检查浏览器开发工具中的元素，您会发现highcharts正在设置内联样式。为了用外部CSS覆盖它们，你需要取出你的“！important”棒。要改变由高图形创建的内部div的大小并以其内联确定高度和宽度，它将需要直接定位，新值将需要“！important”来覆盖highcharts计算的开始值。

Answer 2

请有关此http://jsfiddle.net/devanshumadan/jqqz6vvm/6/

var seriesData = null; 
 

 
setTimeout(function(){ 
 
$(".chartDiv").animate({ 
 
    top: "100px", 
 
    left: "100px", 
 
    width: "640px", 
 
    height: "360px" 
 
}); 
 
}, 10000); 
 

 
setInterval(function(){ 
 
console.dir($('#chartContainer').highcharts().series); 
 
seriesData = [((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1)]; 
 
var chart = $('#chartContainer').highcharts(); 
 
     chart.series[0].setData(seriesData, false); 
 
$('#chartContainer').highcharts().redraw(); 
 
}, 5000); 
 

 
$(function() { 
 
    $('#chartContainer').highcharts({ 
 
     title: { 
 
      text: 'Monthly Average Temperature', 
 
      x: -20 //center 
 
     }, 
 
     subtitle: { 
 
      text: 'Source: WorldClimate.com', 
 
      x: -20 
 
     }, 
 
     xAxis: { 
 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Temperature (°C)' 
 
      }, 
 
      plotLines: [{ 
 
       value: 0, 
 
       width: 1, 
 
       color: '#808080' 
 
      }] 
 
     }, 
 
     tooltip: { 
 
      valueSuffix: '°C' 
 
     }, 
 
     series: [{ 
 
      name: 'Tokyo', 
 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
 
     }] 
 
    }); 
 
    
 
});

.chartDiv { 
 
    position: absolute; 
 
    height: 1280px; 
 
    width: 720px; 
 
    top:0px; 
 
    left:0px; 
 
} 
 
#chartContainer { 
 
    position:absolute; 
 
    height:100%; 
 
    width:100%; 
 
}

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
<div class="chartDiv"> 
 
    <div id="chartContainer"></div> 
 
</div>

Answer 3

更新的解决方案如你发现，Highcharts可视化可能会非常棘手调整，而reflow()功能并不总是有益的或者合适的解决方案。

我不确定您是否注意到了，但是如果您调整了浏览器窗口的大小，图表的确会重塑为其包含的div。你想要做的就是模仿Highcharts的原生能力来调整这种方式。

在您的animate函数中，我添加了一个setSize()函数来基本上将图表重置为包含div的新维度。

$(".chartDiv").animate({ 
    top: "100px", 
    left: "100px", 
    width: "640px", 
    height: "360px" 
}, function() { 
    $('#chartContainer').highcharts().setSize(
     $(".chartDiv").width(), // new width of the containing div 
     $(".chartDiv").height(), // new height of the containing div 
     false // don't animate the chart itself changing 
    ); 
}); 

这里是你的代码上的jsfiddle工作版本（基于Highcharts演示之一），显示这是如何工作的：http://jsfiddle.net/brightmatrix/02hr0wqs/

我希望这有助于您！

更新（2016年7月18日）：每对我的回答原来的海报的评论，我在setSize()加入false参数，以防止图表本身从它的大小时动画。您还可以在animate()之后添加一个整数作为第二个参数，在声明顶部，左侧等尺寸之后并在包含setSize()的函数之前调整包含div元素的动画。