gridster c3 charts自動​​サイズ変更の問題

Question

私はgridsterでc3 chartsサイジングの問題に直面しています。どのように私はどのように私はそこにあるグリッドボックスに応じて適切に自動サイズ変更されるグラフを作ることができますか？私はチャートは、箱から出して行っている、このサイズのプロパティを削除した場合

size: { 
     height: 100, 
     width: 100 
    } 

：私はオプションでサイズを与えているPlunker

を見つけてください。しかし、彼らはグリスタボックスでは小さすぎます。どのようにして、これらのチャートを自動的に高さと幅を占めるようにすることができますか？

Answer 1

私はずっと前と同様の問題がありました。私がしたのはscale()の使用ですが、firefoxでは動作しません。

基本的には読み込み時の幅を見つけて、ユーザーが画面サイズ（またはコンテナのサイズ変更などの他のイベント）を変更したときに新しい尺度を作成します。

はあなたのplunkerの下部にこれを追加します。スケールします

<script> 

    let width = window.innerWidth; 

    window.addEventListener('resize', (event) => { 
     let newWidth = window.innerWidth; 
     let ratio = newWidth/width; 
     let ctnr = document.getElementById('widget1'); 

     ctnr.style.transform = "scale(" + ratio + ")"; 

    }); 
</script> 

ウィジェット1.もちろん、あなたがあなたのために働くものを見つけるために数字を少しプレイしているかもしれません。

ただし、ウィジェットはそのまま残ります。あなたはそれを左揃えにしたいのであれば、あなたのCSSで使用することができます。

transform-origin: 0; 

私はこのことができます願っています。使用している

Answer 2

オプション：

size: { 
    height: 100, 
    width: 100 
} 

は100px代わりの100% にsvg要素の高さと幅を設定している私は正常100%にwidthを設定します

size: { 
    height: '100%', 
    width: '100%' 
} 

を試してみましたどういうわけかheightは320px

に設定されます

ですから、あなたのCSSにこれを追加した場合：

.c3 svg { 
    width: 100%; 
    height: 100%; 
} 

あなたのサイジングの問題を解決すること。

EDIT

初期サイズとサイズ変更のあなたのコントローラに追加いくつかのコメントを設定するには、ほんの少しの変更 - あなたがに基づいて、あなたのチャートの一部サイズ変更を追加する必要がありますイベントハンドラを、停止新しいサイズ。 C3プラグインはまた、これがスムーズにgridsterで動作するようSee it here

resizable: { 
    enabled: true, 
    handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'], 

    // optional callback fired when resize is started 
    start: function(event, $element, widget) {}, 

    // optional callback fired when item is resized, 
    resize: function(event, $element, widget) {}, 

    // optional callback fired when item is finished resizing 
    stop: function(event, $element, widget) { 
     // here should update the size according to the widget size 
     // widget.sizeX (* 160px) and widget.sizeY (* 160px) 
     // and further adjustments 
    } 
    }, 

Answer 3

使用は、このプラグインnvd3は同じですが、チェックアウトこの

https://krispo.github.io/angular-nvd3/#/dashboard