ハイチャート - ウィンドウ上の余白の更新サイズ変更

Question

resizeで更新したい特定のマージンを持つhighchartsの領域グラフを作成しています。これは、グラフに関連するコードです：

var chart = new Highcharts.chart({ 
    chart: { 
     renderTo : options.element, 
     marginLeft: -calcOutsideMargin(), 
     marginRight: -calcOutsideMargin(), 
     backgroundColor:'rgba(255, 255, 255, 0)', 
     type: 'areaspline' 
    }, 
    plotOptions: {    
     areaspline: { 
     animation: false, 
     states: { hover: { enabled: false } }, 
     fillOpacity: 0.5, 
     marker:{ 
      states:{ 
       select: { 
        radius: 5, 
        fillColor: '#ff0000', 
        lineColor: '#404759' 
       } 
      } 
     } 
    }, 
    series: series 
}); 

そして、これはマージンの大きさを定義する必要がある関数です：

不幸

calcOutsideMargin: function() { 
    return ((window.addEventListener('resize', window.innerWidth)/5)/2) + 5; 
} 

私が予想される長さがNaNだというエラーが出ますwindow.innerWidthを使用した場合は更新されません。この問題を解決し、ウィンドウのサイズ変更時にマージンを更新する方法について考えていますか？

ご返信いただきありがとうございます！

EDIT

JSFiddle

Answer 1

あなたは、いくつかのunworkingコードを持っています。 charts.marginLeft,charts.marginRightおよびcharts.widthは、サイズをリアルタイムで変更する機能を受け付けません。変数と関数の結果のみを受け入れます。あなたは手動でウィンドウresizeイベントを処理し、すべての作業を行う必要があります。これらのパラメータは、chart.updateメソッドを使用して変更できます。

私は中心のチャートを使った実例です。ウィンドウのサイズを変更して、ウィンドウのリサイズイベントの両方のコンソールをチェックして、文字をアニメーションサイズを変更：

#container > div { 
    margin:auto; 
} 

：

$(function() { 
    //var chart; 

    function calcOutsideMargin() { 
     console.log('margin resize', Date.now()); 
     return ((window.innerWidth/5)/2); 
    }; 

    $(window).resize(function() { 
     var margin = calcOutsideMargin(), 
      width = window.innerWidth - (margin * 2); 
     window.chart.update({ 
      chart: { 
       renderTo: 'container', 
       marginLeft: margin, // (vw/5)/2 
       marginRight: margin, // (vw/5)/2 
       width: width 
      } 
     }); 
    }); 

    var margin = calcOutsideMargin(), 
     width = window.innerWidth - (margin * 2); 

    $(document).ready(function() { 
     window.chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       marginLeft: margin, // (vw/5)/2 
       marginRight: margin, // (vw/5)/2 
       width: width, // window.addEventListener("resize", window.innerWidth), 
       spacingBottom: 6, 
       spacingTop: 0, 
       backgroundColor:'rgba(255, 255, 255, 0)', 
       type: 'areaspline' 
      }, 
      title: { text: '' }, 
      legend: { enabled: false }, 
      xAxis: { visible: false, allowDecimals: false }, 
      yAxis: { visible: false }, 
      tooltip: { enabled: false }, 
      credits: { enabled: false }, 
      plotOptions: {    
       areaspline: { 
       animation: false, 
       states: { hover: { enabled: false } }, 
       fillOpacity: 0.5, 
       marker:{ 
       states:{ 
        select: { 
        radius: 5, 
        fillColor: '#ff0000', 
        lineColor: '#404759' 
       } 
       } 
       } 
       }, 
      }, 
      series: [{ 
       name: 'F', 
       data: [6 , 11, 32, 110, 235, 369, 640, 1005, 1436 ] 
      }, { 
       name: 'C', 
       data: [5, 25, 50, 120, 150, 200, 426, 660, 869, 1060] 
      }] 
     }); 
    }); 
}); 

は私もちょうど中央にチャートの整列を持つように、このCSSコードを追加しましたあなたはここに私の完全な作業例を確認することができます。http://zikro.gr/dbg/html/highcharts.html

Answer 2

をあなたは、コンテナのサイズを変更することができます

$(window).resize(function() { 
    $('#container').css({ 
     "marginLeft": calcOutsideMargin() + "px", 
     "marginRight": calcOutsideMargin() + "px" 
    }); 
});