HighChartsの列の配置方法

Question

固定幅と高さを持つ親コンテナがあります。ハイチャートを使用してレンダリングされるグラフは、親コンテナ内に含まれます。誰かが、グラフコンテナをスクロール可能にし、ラベルとバーを適切に配置するために何をすべきか教えてください。これにより、すべてのラベルがはっきりと見え、バーはうまく配置されます。より良く理解するためにjsfiddleを見つけてくださいhttps://jsfiddle.net/z5wqgkm9/

は

scrollbar: { 
      enabled: true 
      } 

を使用してスクロールを有効にする試みたが、これはここでの問題はhighchartsがチャートをレンダリングするために、コンテナの幅を使用することで多くの助けに

Answer 1

作業を行う必要があり、親のdivにoverflow: scrollを設定します。

<div style="width:500px;height:600px; overflow: scroll;"> 
    <div id="recoranks" style="width: 400%; height: 100%; margin: 0 auto"></div> 
</div> 

例：jsfiddle.net/z5wqgkm9/2

Answer 2

ではありません。したがって、何を設定しても親コンテナの幅と高さに適合します。

グラフを幅方向または高さ方向、またはその両方でレンダリングし、スクロールされた包含ボックス内に保持できるようにするには、要素の位置を非表示にするfloatプロパティを利用できます親。

あなたがしなければならないことは次のとおりです。

最初。メインdivの上部に別のdivコンテナを追加します<div style="width:500px;height:600px">

秒。最上部のコンテナに例えば.main-containerというCSSクラスを与え、内部divにたとえば.inner-containerのCSSクラスを与えます。

だからあなたのhtmlは今、次の

<div class="main-container"> 
    <div class="inner-container"> 
    <div id="recoranks" style="min-width: 100%; height: 100%; margin: 0 auto"> </div> 
    </div> 
</div> 

ようになります。次のCSSクラスを追加してください：

.main-container { 
    width:500px; 
    height:600px; 
    overflow-x:scroll; 
    overflow-y:hidden; 
} 

.inner-container { 
    width:700px; 
    height:580px; 
    float:left 
} 

あなたのすべてのセット。

私たちが行ったことについての詳細はほとんどありません。我々は別のdivとグラフdivをカバーしました。この上部のdivは、スクロールを持つ幅と高さの限られたコンテナになります。チャートコンテナに必要な幅と高さを与えました。また、y軸のオーバーフローを隠し、オーバーフローをx軸にスクロール可能にするように依頼しました。これは、シナリオが増加した幅に基づいて水平方向にスクロールするだけで、チャートバーに間隔を明示的に追加するためです。これらのオーバーフロー設定は、必要に応じて変更できます。

私たちが内部チャートdivコンテナに対して行ったことは、それが親の幅に従わないように浮動させることです。親がそれにスペースを追加するブロック要素を持っていないと思うからです。これで、このfloatコンテナに設定した幅と高さが、実際のグラフの幅と高さを制御するのに役立ちます。あなたのコードを使用して上記の溶液で

サンプル：http://codepen.io/Nasir_T/pen/QGbxRw