Highchart

Question

の一般的なサイズを小さくするためにどのように私は、このスキーマのように、容器内の4のチャートを表示したい：

は、だから私は、チャートの一般的なサイズを小さくする必要があります。私はchart.resize（totalsize/4）のような何かを見つけることができないので、すべてのサイズを減らすことができます。

誰かがすでにこのような4つのチャートを表示していますが、私の目標は4つのチャートでそれぞれ3つのコンテナを表示し、反応するので、コンテナは1つ下になり、チャートも1つ下になります。

<div class="tableChart"> 
      <div class="row"> 
       <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartMem}}</div> 
       <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartCPU}}</div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartNet}}</div> 
       <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartDisk}}</div> 
      </div> 
      </div> 

、結果は次のとおりです：

だから一瞬私のコードは、私が

Answer 1

これは作るべきチャートの一般的なサイズを小さくする必要がある理由です

行上の2つの同じカラムのレイアウトを、あなたはそれ は、ブートストラップ標準（https://getbootstrap.com/examples/grid/）以下の複数の行または複数の列を追加し編集することができます。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6"> 
     Your content here 
    </div> 
    <div class="col-md-6"> 
     Your content here 
    </div> 
    </div> 
</div> 

あなたは、グリッドを作るために、テーブルを必要としないように。そしてこれは、より小型のデバイスのためのスタイルを追加することに対応することができます。例：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 col-xs-12"> 
      Your content here 
     </div> 
     <div class="col-md-6 col-xs-12"> 
      Your content here 
     </div> 
    </div> 
</div> 

これにより、余分な小さなデバイス（col-xs-12）のすべての使用可能なスペースに収まるようになります。次に、小さなデバイス用のcol - sm - ..クラスもあります。あなたはあなたのニーズに合ったものを選ぶだけです。