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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 02:26:32  来源:igfitidea点击:

Legend on bottom with highcharts

javascripthighcharts

提问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 legendpropery 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

Here's a demonstration.

这是一个演示