标题默认显示在图表的顶部,包括标题和副标题(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. };
      7. chart.setTitle(title);

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

      1. var subtitle = {
      2. style:{
      3. color:"#000",
      4. fontWeight:"bold"
      5. }
      6. };
      7. 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