文档章节

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

鸟栖沙岩
 鸟栖沙岩
发布于 2016/07/11 17:20
字数 717
阅读 10
收藏 0

标题默认显示在图表的顶部,包括标题和副标题(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='http://www.hcharts.cn' target='_blank'>中文教程</a>" 
}

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

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

实例:

title :{
    text:null
}

via:hcharts.cn

点击下载最新版Highcharts

本文转载自:https://www.evget.com/article/2016/7/11/24457.html

鸟栖沙岩
粉丝 3
博文 92
码字总数 7693
作品 0
九龙坡
私信 提问
Highcharts图表结构分析:详解标题与副标题

JavaScript图表Highcharts默认,标题显示在图表的头部,可选的副标题显示在其下。 标题和副标题内容可以通过如下代码设置 title: {text: '自定义标题'},subtitle: {text: '自定义副标题'} 关...

咲晚杍
2013/12/31
0
0
​网页图表Highcharts实践教程标之添加题副标题版权信息

网页图表Highcharts实践教程标之添加题副标题版权信息 Highcharts辅助元素 辅助元素图表的非必要元素,如标题、版权信息、标签、载入动态。它们不和图表数据发生关联,只是额外说明一些基本信...

大学霸
2015/06/10
0
0
​网页图表Highcharts实践教程之图表代码构成

网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例。 【实例1-1】下面来制作北京连续一周最高温度折线图。操作过程如下: (1)新建...

大学霸
2015/05/28
0
0
Highcharts图表结构分析:详解Highcharts基本组成

一般情况下,交互图表HighCharts包含Title-标题、Axis-轴、Series-数据系列、Tooltip-工具提示、Legend-图例等,每个部分对于位置如下图所示 : Title-标题 标题包括Title和Subtitle,即标题...

咲晚杍
2013/12/23
0
0
我的网站搭建 (第十一天) 阅读量曲线图

为了让自己能直观的看出博客阅读量的变化,而不需要到后台观察,所以就使用了Highcharts的基础折线图来帮助实现。其文档地址:Highcharts 演示 样例效果: 通过阅读API文档,可以实现自己想要...

代码打碟手
2018/09/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
5
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部