标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。设置标题和副标题的示例代码如下：

  1. title: {
  2.     text: '我是标题'
  3. },
  4. subtitle: {
  5.     text: '我是副标题'
  6. }

一、标题的常用属性

标题只有一些文字信息，所以标题的配置无非是一些定位、字体大小、颜色等的配置，常见属性如下表所示：

属性名 描述 默认值
text 标题的文字 "Chart title"
align 文字水平对齐方式，有left、center、right可选 "center"
verticalAlign 文字垂直对齐方式，有top、middle、bottom可选 ""
useHTML 是否解析html标签，设置解析后，可以使用例如a等html标签 false
floating 是否浮动，设置浮动后，标题将不占用图表区位置 false
margin 标题和图表区的间隔，当有副标题时，表示标题和副标题之间的间隔 15
style 文字样式，可以设置文字颜色、字体、字号，注意和css有略微的不同，例如font-size用fontSize、font-family用fontFamily表示 { color: '#3E576F', fontSize: '16px'}
x 相对于水平对齐的偏移量，可以是负数，单位是px 0
y 相对于垂直对齐的偏移量，可以使负数，单位是px 0

更多关于标题的属性请参考API文档：title

二、动态设置和获取标题

1、获取标题内容

可以通过Highcharts对象获取标题内容，实例代码如下

  1. var chart = Highcharts.chart(el, options);    // Highcharts构造函数
  2. var title  = chart.title.textStr;             // 通过chart对象获取标题内容

2、动态设置标题

Highcharts 提供了 setTitle() 函数供动态设置标题用

  1. setTitle (Object title, object subtitle, Boolean redraw)

参数说明：

  • title : 标题对象
  • subtitle: 副标题对象
  • redraw：是否重绘，即设置标题后是否重新绘制图表，默认是false
    实例说明：
  1. var title = {
  2.     text:"我是新标题",
  3.     style:{
  4.         color:"#ff0000"
  5.     }
  6. };
  8. chart.setTitle(title);

上述方法不仅仅是设置标题的文字，有的时候我们可能只需要更改标题的样式，例如颜色、字号的，也可以通过该函数实现，示例代码如下

  1. var subtitle = {
  2.     style:{
  3.         color:"#000",
  4.         fontWeight:"bold"
  5.     }
  6. };
  8. chart.setTitle(null, subtitle);     //设置副标题，第一个参数设置为null

在线试一试

另外还可以通过标题对象的 update 方法来对其进行更新操作，该函数的基本用法和 setTitle 类似，更多详情参考 API 文档

三、常见问题

1、如何在标题中添加链接

实现方法：

设置 useHTML为 true，然后在标题文字中加入 a 标签

实例：

  1. title :{
  2.     useHTML:true,
  3.     text: "Highcharts中文网 | <a href='https://www.hcharts.cn' target='_blank'>中文教程</a>" 
  4. }

2、如何隐藏（不显示）标题

实现方法：

设置标题文字为空即可

实例：

  1. title: {
  2.     text: null
  3. }

原文: https://www.hcharts.cn/docs/basic-title