[英]Display legend items in two columns highcharts
在高圖中,可以將圖例顯示為垂直堆疊的兩列嗎?
我正在嘗試找出顯示圖例項目的最佳方法,此刻,我們將圖例項目全部堆疊在一起。
圖表上最多有4個系列。
我不太確定如何處理此問題,我看到了useHTML的選項,但隨后似乎找不到任何處理HTML的示例。
http://jsbin.com/oyicuc/9/edit
任何建議都將非常有幫助,謝謝。
您是否嘗試過使用itemWidth參數?
請看看
http://jsfiddle.net/B9L2b/1266/
legend: {
width: 200,
itemWidth: 100
},
http://api.highcharts.com/highcharts#legend.itemWidth
編輯:
width:600,
itemWidth:300,
itemStyle: {
width:280
}
function renderElements() {
if (this.legend) {
this.legend.destroy();
}
//distance between 2 elements
let itemDistance = this.legend.options.itemDistance;
//the biggest element
let maxItemWidth = this.legend.maxItemWidth;
//make the width of the legend in the size of 2 largest elements +
//distance
let nextLegendWidth = (maxItemWidth * 2) + itemDistance;
//container width
let boxWidth = this.plotBox.width;
//if the length of the 2 largest elements + the distance between them
//is less than the width of container, we make 1 row, else
//set legend width 2 max elements + distance between
if (boxWidth < nextLegendWidth) {
this.legend.options.width = maxItemWidth;
} else {
this.legend.options.width = nextLegendWidth;
}
this.render()
}
chart: {
events: {
load: renderElements,
redraw: renderElements
}
}
也許您可以使用圖例的“ labelFormater”。
http://api.highcharts.com/highcharts#legend.labelFormatter
然后,您可以創建一個表格並在創建文字時排列圖例文本。
看一下文檔頁面上的示例。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.