javascript 底部带有高图的图例
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15880276/
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
Legend on bottom with highcharts
提问by Sebastien
I am using highcharts to draw some charts. I use the basic line plot like this:
我正在使用 highcharts 绘制一些图表。我使用这样的基本线图:
http://www.highcharts.com/demo/spline-irregular-time
http://www.highcharts.com/demo/spline-irregular-time
How can I display the legend under the chart area instead of at the right?
如何在图表区域下而不是在右侧显示图例?
http://www.highcharts.com/demo/column-stacked-percent
http://www.highcharts.com/demo/column-stacked-percent
Thx
谢谢
回答by Bojan Kovacevic
marginBottom can be used to put legend on bottom of chart. You can still use legend property to move legend for example in the middle or right(i used center).
marginBottom 可用于在图表底部放置图例。您仍然可以使用图例属性在中间或右侧移动图例(我使用中心)。
chart: {
marginBottom: 100
},
legend: {
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
Possible solution: fiddle
可能的解决方案:小提琴
回答by andypaxo
Having the legend under the chart is the default, so you can omit the legend
propery entirely. Bear in mind that to make this look nice, you'll have to add a little to the bottom margin, otherwise the chart and the legend will overlap.
图表下方的图例是默认设置,因此您可以legend
完全省略该属性。请记住,要使其看起来不错,您必须在底部边距上添加一点,否则图表和图例将重叠。
chart: {
type: 'line',
marginRight: 130,
marginBottom: 70 // Increase this to 70 or so
},
// Remove the legend property completely