javascript - Highcharts - 图表下的位置标题

Question

是否可以将标题直接放置在图表下方，如果我将其设置为 verticalAlign: 'bottom' 它不是直接放置在图表下方而是在底部，这不是我想要的。

title: {
    enabled: true,
    text: 'Foo',
    verticalAlign: 'bottom',
    align: 'left'
},

Answer 1

请参阅此 fiddle :Fiddle

我通过给它一个固定的 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) }
...
});