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は同じサイズのままです。それ以外のものは宣言されていないが自動的に親のサイズに変更されると解釈しますが、そうではありません。それは、グラフが反応しないことを念頭に置いていますか？理想的には、chartDivには境界線があるので、親がアニメーション化されます。最初にアニメーションが作成されていれば悪くなります（今はそうではありません）。

Answer 1

ブラウザの開発ツールの要素を調べると、ハイチャートがインラインスタイルを設定していることがわかります。それらを外部CSSで上書きするには、あなたの "重要な"スティックを取り出す必要があります。高さと幅のインライン決定でハイチャートによって作成された内部divのサイズを変更するには、それを直接ターゲットにする必要があり、新しい値にはハイチャートが計算する開始値を上書きするための "！important"が必要です。

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に変更されます。あなたのケースでやりたいことは、ハイチャートのこのようなサイズ変更機能を模倣したものです。

animate関数では、setSize()関数を追加して、基本的にチャートを新しいdivのディメンションにリセットしました。 http://jsfiddle.net/brightmatrix/02hr0wqs/

私はあなたのためにこれは便利願っています：

$(".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 
    ); 
}); 

ここでは、これがどのように働くかを示す（Highchartsデモのいずれかに基づいて）JSFiddle上のコードの作業バージョンです！

アップデート（2016年7月18日）は：私の答えにオリジナルポスターのコメントごとに、私は、そのサイズを変更するときのアニメーションから、チャート自体を防ぐためにsetSize()にfalseのパラメータを追加しました。上、左などのディメンションを宣言した直後、およびsetSize()を含む関数の前に、包含するdiv要素のアニメーションを調整するために、animate()に2番目のパラメータとして整数を追加することもできます。