彩票走势图

Highcharts基础教程(三):标题(Title)

转帖|使用教程|编辑:郑恭琳|2016-07-11 16:59:29.000|阅读 4130 次

概述:本次教程主要讲解Highcharts图表标题(Title)设置。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

标题默认显示在图表的顶部,包括标题和副标题(subTitle),其中副标题是非必须的。设置标题和副标题的示例代码如下:

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

一、标题的常用属性

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

属性名 描述 默认值
 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

二、动态设置和获取标题

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标签

实例:

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

2、如何隐藏(不显示)标题

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

实例:

title :{
    text:null
}

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

<p><strong><a href="//pclwef.cn/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="//chat8.live800.com/live800/chatClient/chatbox.jsp?companyID=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="//chat8.live800.com/live800/chatClient/chatbox.jsp?companyID=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>


标签:图表

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP