2016-04-30 11 views
1

凡例がチャートの下に置かれていると、ボトムマージンは自動的に決定され、すべてが適切に収まるようにします。ハイチャート:カスタムマージンを持つボトムの凡例ボトムはすでに

しかし、下の余白にカスタムアイテムが含まれているため、marginBottomをオーバーライドしなければならなかったグラフがあります。これは、凡例がグラフの下に置かれているときに、自動的に計算されます。

this jsfiddleで簡単なモックアップをやったことがあります。ここでは、凡例を有効/無効にしたり、シリーズの数を変更したりして、状況がどのように見えなくなっているかを確認できます。

私はおそらく、凡例を説明するために自分自身でmarginBottom自分自身に必要な調整を加えなければならないと思っていますが、それはどうですか?

どうすればいいですか?

編集:私は近づいていると思っています...しかし、私はそれが最善の方法に行くのか分からない... this jsfiddleを参照してください。

+0

あなたが2番目のフィドルに何を持っているかは、私が見ることのできるものからかなりかすかなようです。私は自分のグラフのいくつかと同様の状況があり、あなたが構築したものは私のために非常に役立つでしょう。あなたの調整はチャートのネイティブの応答性を壊していることに注意してください(私はなぜそうは思っていませんが、これはあなたのためのデングブレイカーではないかもしれません)。 –

+0

@brightmatrixネイティブの応答性のどの部分が壊れていますか? – drmrbrewer

+0

チャートを含むフィドルのウィンドウのサイズを変更すると、その内容に合わせて自動的に調整されます。あなたのフィドルとデモを比較する:http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/ –

答えて

1

私はこの質問とあなたの更新されたフィドルを数週間評価してきました。私はあなたの初期の問題とコメントの中で育んだ反応性のバグの両方を解決したと思います。

chartオプションでは、オプションの後に使用した追加機能に対して、レンダリング時にシリーズをプルするロードイベントを追加しました。明示的なmarginBottom宣言も削除しました。

chart: { 
     type: 'line', 
     borderWidth: 1, 
     plotBorderWidth: 1, 
     events: { 
      load: function() { 
      for (var i = 0; i < numberOfSeries; i++) this.addSeries(basicSeries); 
      } 
     } 
    }, 

これは、(コードの先頭に静的変数として宣言した)一連の数をプルし、実行時に追加するものです。 Highchartsのコードは、凡例とそのアイテムのサイズに合わせて、チャートの下に必要な領域を自動的に調整します。

はここで、これらの変更を使用して(更新)フィドルの更新バージョンです:http://jsfiddle.net/brightmatrix/4fauh2bk/6/

追記:チャートの応答性の本質を破った何chart.setSize()機能で一定の幅の値でした。 autoの幅やパーセント値(例えば100%)を設定すると、サイズを変更することはできますが、関数を実行した後にグラフを再描画する必要があるかもしれません。

関連する問題