Highcharts - 将标题放置在图表下方

Question

如果我将垂直对齐(verticalAlign)设置为'bottom'，标题是否可以直接放置在图表下方？但它并不会直接放置在图表下方，而是在底部，这不是我想要的。

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

- Philip

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) }
...
}); 

- AleB

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。

- Andrew

---

注意：在 fontWeight: 'normal' 后需要添加注释 - pterry26

Answer 3

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

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

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

- truchiranga

Answer 4

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

根据文档，verticalAlign 属性是： 标题的垂直对齐方式。可以是“top”、“middle”和“bottom”之一。当给定一个值时，标题的行为就像浮动为真。

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

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

JSFiddle 用于在图表下方放置标题：JSFiddle

- Minh Tri Ha