如果我将垂直对齐(verticalAlign)设置为'bottom',标题是否可以直接放置在图表下方?但它并不会直接放置在图表下方,而是在底部,这不是我想要的。
title: {
enabled: true,
text: 'Foo',
verticalAlign: 'bottom',
align: 'left'
},
如果我将垂直对齐(verticalAlign)设置为'bottom',标题是否可以直接放置在图表下方?但它并不会直接放置在图表下方,而是在底部,这不是我想要的。
title: {
enabled: true,
text: 'Foo',
verticalAlign: 'bottom',
align: 'left'
},
请查看这个示例:示例
我通过给标题一个固定的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]
}]
});
如果您不想使用固定数字来定位标题(例如,可能有大小动态变化的图表),那么没关系,您可以输入一个公式或函数。例如:
$('#container').highcharts({
...
title: { y : $('#container').height() * 0.85 } // this will position the title with 85% margin from the top.
...
});
或者
function myTitlePosition(params){ //return some custom value in here }
$('#container').highcharts({
...
title: { y : mytitlePosition(params) }
...
});
现在我们可以在不使用固定坐标或 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'
}
}
由于我无法使标题本身的margin
属性起作用,因此我使用了@AleB上面提出的解决方法:
chart:{
marginBottom : '50' // this to make room for title under axis
}
marginBottom
,您也可以在series
规范中使用size
属性。series: [
{
name: 'Categories',
data: data,
size: '60%'
},
]
您需要在标题对象中添加属性“floating”。
根据文档,verticalAlign
属性是:
标题的垂直对齐方式。可以是“top”、“middle”和“bottom”之一。当给定一个值时,标题的行为就像浮动为真。
{
title: {
text: "Your title text",
floating: true,
verticalAlign: "bottom"
}
}
文档链接:https://api.highcharts.com/highcharts/title
JSFiddle 用于在图表下方放置标题:JSFiddle
fontWeight: 'normal'
后需要添加注释 - pterry26