2017-05-18 19 views
1

ラッピングを維持しながら凡例のアイテムをチャートの全幅に広げることは可能ですか?フレックスアライメントのプロパティspace-betweenのようなものを探しています。ハイチャートの凡例が全幅に広がります

enter image description here

私は(だけで結構です最初の行、上の3つの項目を持つ以外)欲しい: enter image description here

+0

でしたhttp://jsfiddle.netであなたの設定とスタイルを共有してください。 – arcquim

+0

私はそれのためのオプションがあるとは思わない。そのようなレイアウトを持つには、手動で凡例を再配置するか、html/cssで独自の凡例を作成する必要があると思います。例https://codepen.io/kevintcoughlin/pen/WrKLMe – morganfree

+0

@arcquimここでは、近い設定のフィドルです:https://jsfiddle.net/LLExL/7540/ –

答えて

0

あなたは動的に凡例項目の位置を変更することができ、私が持っているもの

ロード/再描画イベント。

あなたのフィドルに基づいて、この方法は、このようにすることができ、チャートオプションで

function adjustLegend() { 
    const legend = this.legend 
    const legendWidth = this.chartWidth - 20 

    legend.allItems.forEach((item, i, allItems) => { 
    const {width, height} = item.legendGroup.getBBox() 
    const itemsPerRow = i < 3 ? 3 : 2 

    item.legendGroup.attr({ 
     translateX: (i % itemsPerRow) * (legendWidth - width)/(itemsPerRow - 1), 
     translateY: Math.floor(i/3) * (height + 5) 
    }) 
    }) 
} 

(HTML項目の幅が異なっつかんでなければなりません):

events: { 
    load: adjustLegend, 
    redraw: adjustLegend 
} 

例:https://jsfiddle.net/f6btakom/1/

関連する問題