Highcharts基础教程（三）：标题（Title）

本次教程主要讲解Highcharts图表标题（Title）设置。

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

title: {    text: '我是标题'},subtitle: {    text: '我是副标题'}

一、标题的常用属性

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

二、动态设置和获取标题

1、获取标题内容

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

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

2、动态设置标题

Highcharts提供了setTitle()函数供动态设置标题用，setTitle()函数结构如下

setTitle (Object title, object subtitle, Boolean redraw)

参数说明：

• title : 标题对象
• subtitle: 副标题对象
• redraw：是否重绘，即设置标题后是否重新绘制图表，默认是false

实例说明：

var title = {    text:"我是新标题",    style:{        color:"#ff0000"    }};var chart = new Highcharts.Chart();chart.setTitle(title);

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

var subtitle = {    style:{        color:"#000",        fontWeight:"bold"    }};var chart = new Highcharts.Chart();chart.setTitle(null,subtitle);     //设置副标题，第一个参数设置为null

三、关于标题的常见问题

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

实现方法：

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

实例：

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

实现方法： 设置标题文字为空即可

实例：

title :{    text:null}

<p><span style=”font-family:microsoft yahei; font-size:16px”>Via：hcharts.cn</span></p>

<p><strong><a href=”https://www.evget.com/product/3328/download” style=”box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; outline: 0px; background: transparent;”>最新版 Highcharts</a></strong></p>

<p><strong>如果你想提供任何产品反馈，<a href=”http://chat8.live800.com/live800/chatClient/chatbox.jspompanyID=60357&amp;configID=149250&amp;jid=1316272045″ style=”box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; outline: 0px; background: transparent;” target=”_blank”>请与我们联系</a>。</strong></p>

<p><span style=”color:rgb(255, 0, 0)”><strong>购买最新版Highcharts&lt;<a href=”http://chat8.live800.com/live800/chatClient/chatbox.jspompanyID=60357&amp;configID=149250&amp;jid=1316272045″ style=”box-sizing: border-box; color: rgb(66, 139, 202); text-decoration: none; outline: 0px; background: transparent;” target=”_blank”>咨询在线客服</a>&gt;，即可拥有最新正版授权!</strong></span></p>

标签：图表