javascript Highcharts - 图表下的位置标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21757174/
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
Highcharts - Position title under chart
提问by Philip
Is it possible to position the title directly under the chart, if I set it to verticalAlign: 'bottom' its not place directly under the chart but at the bottom and that's not what I'm after.
是否可以将标题直接放置在图表下方，如果我将其设置为 verticalAlign: 'bottom' 它不是直接放置在图表下方而是位于底部，这不是我所追求的。
title: {
enabled: true,
text: 'Foo',
verticalAlign: 'bottom',
align: 'left'
},
回答by AleB
See this fiddle : Fiddle
看到这个小提琴：小提琴
I moved the title to desired location by giving it a fixed y-coordinate.
我通过给它一个固定的 y 坐标将标题移动到所需的位置。
$(function () {
$('#container').highcharts({
chart: {
plotBorderWidth: 1,
marginLeft: 80,
marginBottom : 100 // this to make room for title under axis
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'My custom title',
align: 'center',
y: 340 // this to move y-coordinate of title to desired location
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
If you dont want to use fixed numbers to position your title (e.g maybe you have charts that dynamically change in size), no worries, you can feed it a formula or function, for example:
如果您不想使用固定数字来定位您的标题（例如，您的图表可能会动态改变大小），不用担心，您可以为其提供公式或函数，例如：
$('#container').highcharts({
...
title: { y : $('#container').height() * 0.85 } // this will position the title with 85% margin from the top.
...
});
or
或者
function myTitlePosition(params){ //return some custom value in here }
$('#container').highcharts({
...
title: { y : mytitlePosition(params) }
...
});
回答by Andrew
Here is how we can now set the title below a chart without using fixed coordinates nor JQuery.
这是我们现在如何在不使用固定坐标或 JQuery 的情况下设置图表下方的标题。
title: {
text: 'My title',
align: 'center',
verticalAlign: 'bottom',
margin: 50,
floating: true,
style: {
// margin: '50px', // does not work for some reasons, see workaround below
color: '#707070',
fontSize: '12px',
fontWeight: 'normal'
textTransform: 'none'
}
}
Because I didn't manage to get the marginproperty working on the title itself, I used the workaround proposed by @AleBabove:
因为我没有设法让margin属性在标题本身上工作，所以我使用了上面@AleB提出的解决方法：
chart:{
marginBottom : '50' // this to make room for title under axis
}
Here is a jsfiddle.
这是一个jsfiddle。
