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元素的動畫。