2016-06-28 10 views
1

ハイチャートのソリューションでは、どのシリーズにどのシリーズが表示されるかを制御することができます。利用可能なシリーズの量のために、私は開始時にそれらをすべて追加するのではなく、最初に多数を隠すのではなく、チェックボックスに機能を拡張しています。ハイチャート - 凡例の配置(左と右/ xとy)

グラフにボタンをオーバーレイして、見た目を統一したいと思っています。 legend.xに負の値を与えて、ボタンのためのスペースを作るために移動させることができるので、これ自体問題はありません。しかし、これは、凡例が元の幅を維持し、余りにも多い場合にはいくつかの選択肢がなくなるため、シリーズがプログラムによって追加されたときに問題を引き起こします。

これは、私の問題の手抜きです。https://jsfiddle.net/paLoxcy3/です。

legend: { 
    align: "right", 
    x: -100 
} 

それはグラフが応答幅を維持する必要があり、ここで追加する価値がある、それゆえ私はちょうどwidthを追加することはできません。これは、関連するスニペットです。さて、私はこれに挑戦しました(そして、シリーズ名が最終的に私の現在のフィドルに一本のラインを落とすとき)、彼らは望んでいない左揃えになります。

私はlegendのオプションを使用して、周りに良いプレーを持っていたが、この時点で効果的に伝説ホルダーにpadding-rightを追加するための唯一の解決策は何とかそれを手動で行うにはchart.events.loadchart.events.redrawを使用することであると仮定してきましたか? と marginBottomを追加するオプションは存在しますが、marginLeftmarginRightは存在しないため、少し迷惑です。

ご迷惑をおかけして申し訳ありません。ドキュメントへのショートカットはhereです。

+2

こんにちは、この問題についての情報をありがとうございます。私はそれがrenderItem関数の小さな問題だと思います。ここでは、この機能を変更したときの動作を確認することができます:https://jsfiddle.net/paLoxcy3/1/ –

+0

パーフェクト。ご協力ありがとうございます。すでにGithubにバグを記録しています:) – Ian

+0

私の例があなたを助けてくれたことを読んでいただきありがとうございます:)答えとして投稿しました。 –

答えて

1

この問題は、Highcharts legend.renderItem関数の小さな問題と関連していると思います。回避策として、明細を別の行に移動する責任を負う場合は変更することができます。ここでは、この文がコードにどのように見えるかを確認することができます

// if the item exceeds the width, start a new line 
     if (horizontal && legend.itemX - initialItemX + itemWidth > 
       (widthOption || (chart.chartWidth - 2 * padding - initialItemX - options.x))) { 
      legend.itemX = initialItemX; 
      legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom; 
      legend.lastLineHeight = 0; // reset for next line (#915, #3976) 
     } 

そして、ここでは、私がこの文をどのように変化したかを見ることができます。

// if the item exceeds the width, start a new line 
     if (horizontal && legend.itemX - initialItemX + itemWidth > 
       (widthOption || (chart.chartWidth - 2 * padding - initialItemX - ((options.align === 'right') ? (-options.x) : options.x)))) { 
      legend.itemX = initialItemX; 
      legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom; 
      legend.lastLineHeight = 0; // reset for next line (#915, #3976) 
     } 

ここでは、この問題に接続Githubのトピックを見つけることができます。 ​​

そして、ここにあなたが私の回避策でのチャートを見ることができます: https://jsfiddle.net/paLoxcy3/2/

よろしくお願いします。

関連する問題