2016-09-15 2 views
0

私はcolumnrangeハイチャートを持っています。 2つの水平グリッド線の間の垂直距離は、プロットする点の数に依存します。HighChartsで列範囲のグリッド距離を修正する方法は?

たとえば、異なる縦の高さに6ポイントがある場合、グリッドの距離はもっと大きくなり、グリッドのポイントを10-12と増やすと、距離が小さくなります。

これは、上記の2つのケースで2つのgridLines間の垂直距離を調整することによって、グラフ全体の高さに合わせようとしているためです。

ただし、プロットする点の数に関係なくグリッド線の距離を修正し、それに応じてチャートコンテナの全体の高さを調整することは可能ですか?

私が試した:またtickIntervalを修正

xAxis:{ 
    labels:{ 
          distance:10 //fixed 
         } 
} 

は助けていません。 また、グラフのコンテナにheight:autoを与えようとしましたが、うまくいきませんでした。

グリッド線間の距離を固定するのが基本だとは思いますが、どういうわけか私はそれをやっていません。助けてください。デモここをクリック http://jsfiddle.net/ay1Lk2yw/2/

答えて

0

var gridLinesDistance = 20, //in pixels 
    top = chart.plotTop, 
    bottom = chart.spacing[2], 
    axis = chart.xAxis[0], 
    range = axis.dataMax - axis.dataMin + 1, 
    newHeight = top + range * gridLinesDistance + bottom; 

$("#container").height(newHeight + 'px'); 
chart.reflow(); //adjust the chart to the new size 

デモ:http://jsfiddle.net/u32gam9r/

0

これはおそらくあなたが探しているものですか?あなたのチャートが可能とグリッド線が互いの間に一定の距離を持つことになりますので、サイズを変更する必要がありどのように大きな計算できhttp://jsfiddle.net/remisture/h2k0gjm5/

yAxis: { 
    tickPixelInterval: 10 
} 
+0

私は 'のX-axis'が縦1である' columnrange'タイプ、で働いています。あなたの上記の解決策は私のコードに適用すると動作しません。ここで私のコードを見つけることができます http://jsfiddle.net/ay1Lk2yw/2/ –

関連する問題