javascript 在两列高图中显示图例项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15473996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display legend items in two columns highcharts
提问by hcharge
In highcharts is it possible to display the legend in two columns, stacked vertically?
在 highcharts 中，是否可以在垂直堆叠的两列中显示图例？
I'm trying to work out the best way of displaying the legend items, at the moment we have the legend items all stacked on top of each other.
我正在尝试找出显示图例项目的最佳方式，目前我们将图例项目全部堆叠在一起。
There will be a maximum of 4 series on the chart.
图表上最多有 4 个系列。
I'm not really sure how to approach this, I see the option of useHTML but then I can't seem to find any examples of what to do with the HTML.
我不太确定如何处理这个问题，我看到了 useHTML 的选项，但是我似乎找不到任何关于如何处理 HTML 的示例。
http://jsbin.com/oyicuc/9/edit
http://jsbin.com/oyicuc/9/edit
Any advice would be very helpful, thanks.
任何建议都会非常有帮助，谢谢。
回答by Sebastian Bochan
Have you tried to use itemWidth parameter?
您是否尝试过使用 itemWidth 参数？
Please take look at
请看一下
http://jsfiddle.net/B9L2b/1266/
http://jsfiddle.net/B9L2b/1266/
legend: {
width: 200,
itemWidth: 100
},
http://api.highcharts.com/highcharts#legend.itemWidth
http://api.highcharts.com/highcharts#legend.itemWidth
EDIT:
编辑：
width:600,
itemWidth:300,
itemStyle: {
width:280
}
回答by Юр?й Деревенко
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
}
}
回答by Roland
Maybe you could use the "labelFormater" of the legend.
也许您可以使用图例的“labelFormater”。
http://api.highcharts.com/highcharts#legend.labelFormatter
http://api.highcharts.com/highcharts#legend.labelFormatter
Then you could create a table and arrange the legend text as you wnat.
然后您可以创建一个表格并按照您的意愿排列图例文本。
Have a look at the example on the documentation page.
查看文档页面上的示例。
