高图表 - 图表下的位置标题

Question

如果我将其

设置为垂直对齐，是否可以将标题直接放置在图表下方："底部"不是直接放置在图表下方，而是位于底部，这不是我想要的。

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

Answer 1

看这把小提琴：小提琴

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

Answer 2

以下是我们现在如何在不使用固定坐标或 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
      }

这是一个jsfiddle。

Answer 3

如果您不想按照上述@Andre的建议设置marginBottom，您还可以在 series 规范中使用 size 属性。

series: [
  {
    name: 'Categories',
    data: data,
    size: '60%'
  },
]

这会减小图表的大小，以便底部对齐的标题不会与其重叠。

Answer 4

您需要在标题对象中添加属性"floating"。

根据文件，verticalAlign属性是：标题的垂直对齐方式。可以是"顶部"、"中间"和"底部"之一。当给定值时，标题的行为就像浮动为真一样。

 {
        title: {
            text: "Your title text",
            floating: true,
            verticalAlign: "bottom"
        }
 }

文档链接：https://api.highcharts.com/highcharts/title

JSFiddle 用于图表下的位置标题： JSFiddle