2012-09-20 19 views
5

ハイチャートデータから多くの情報を必要としない一般的な質問だと思います。ハイチャートの列オーバーラップを防ぐ方法

列が重なり合うのを防ぐにはどうすればよいですか?

それはjsfiddle今

http://highslide.com/forum/download/file.php?id=3157

ある方法については、以下の

を参照してくださいイメージリンク:列を制御し、それらが互いにオーバー/オーバーラップを積み重ねていないことを確認するためにhttp://jsfiddle.net/Dzs5q/

+2

jsFiddle please –

答えて

11

それらのあまりに多くがある場合は、重複を避けるようにスマートに列の幅を減少させ、デフォルトでhttp://jsfiddle.net/jugal/bgNBG/

Highcharts @ここでエラーを試してみて、再現してください。 。

列はあなたがcolumn.pointWidth

column: {   
     pointWidth : 10 
    } 

などを指定することにより、前述のデフォルトの動作を上書きしている場合は重複する傾向があります:http://jsfiddle.net/jugal/bgNBG/2/

@だから、重複を避けるために、私はあなたが持っている2つのオプションが表示されます。

オプション#1。 http://jsfiddle.net/jugal/bgNBG/

オプション#2:@column.pointWidth
を削除これは
などと重ならないようにするための列が薄くなります。
使用column.dataGrouping
これは、一定の幅の列を持つのに役立ちますが、クラッタ/オーバーラップを避けるために、列の数を減らして(グループ化して)役立ちます。

dataGrouping = { 
    groupPixelWidth: 40, // Minimum width for each column 
    units: [[   // Permissible groupings 
     'day', 
     [1, 2, 3,4,5,6] // 1,2,3,4,5,6 days may be grouped into 1 column 
     ]] 
} 

例:http://jsfiddle.net/jugal/JraJW/4/
同様の質問@https://stackoverflow.com/a/12354111/1566575

+0

フィードバックありがとう、しかし私は何でもグループ化することはできません。 –

+1

ありがとう、私は実際にオーバーラップしたいと思って、この答えは正しい方向に私を指摘:) –

-1

最良の方法グラフの幅を制御することです。あなたは含まれている内でこれを行うことができます<div>

  • 〜divはサイズを変更できますが、特定の幅を超えないように制限します。その幅の下にあるものが一緒にぼやけ始め、判読不能であることを知っているので、あなたはこれを行います。
  • CSS: width〜強制的にグラフの幅をある値にすることができます。
  • CSS: no width set〜注意ブラウザウィンドウを遠くまで縮小すると、グラフが判読できなくなります。

包含されるdivの幅を制御し、ラベルをc0deNinja suggestとして回転させることで、ほとんどのスタックオーバー/オーバーラップの問題を防ぐことができます。しかし、チャートに多くのシリーズ/データポイントがある場合でも、これは役に立ちません。

+0

返信いただきありがとうございますが、このオプションはお望みのものではありません。私は与えられた列のためのスペースがあり、幅が固定されていることを知っています –

-1
@

私の問題は類似していたと私は二軸などにアイテムを移動するソリューションをどこにもなっていなかったそれから私は私のx軸が認識されていたました(この場合はdate)連続した2つの列が同じx値を共有していました。

x軸を選択して問題を解決し、「軸タイプ」というオプションを見つけて「データに基づいて自動的に選択」を選択解除して「テキスト軸」に変更しました。それは私のコラムを並べて持っています。

ご迷惑をおかけしますが、おそらく参考になります。

関連する問題