Highcharts学习4 标题(Title)

标题(title)和副标题(subtitle)

 

1、标题的属性

标题默认显示在图标的顶部,副标题显示在标题的下方,副标题是可选的。

highcharts-title

标题和副标题的设置方法如下:

title: {
text: 'My custom title'
},
subtitle: {
text: 'My custom subtitle'
}

 

标题和副标题的定位可以通过修改默认配置(align, float, margin, verticalAlign, x, y)来实现,全部配置参数如下:

属性名 类型 描述 默认值
align String 标题的水平对齐方式,有left、center、right三种对齐方式 "center"
floating Boolean 设置浮动后,标题将不占用图表区位置 false
margin Number 标题和图表区的间隔,当有副标题时,表示标题和副标题之间的间隔 15
style CSSObject 标题的样式。这个属性用来设置字体的样式,用align, x and y来设置文本的对齐方式 {
color: "#333333", fontSize: "18px"
}
text String 标题的文本,设置null用来禁用标题 "Chart title"
useHTML Boolean 是否使用html解析文本 false
verticalAlign String 文字垂直对齐方式,有top、middle、bottom可选。当设置了一个值时,标题作为浮动处理 ""
x Number 标题相对与chart.spacingLeft和 chart.spacingRight对齐的位置。(x=margin left-spacing left) 0
y Number 标题相对与chart.spacingTop和 chart.spacingBottom对齐的位置 depends on the font size

 

2、动态设置标题

可以通过Chart.setTitle方法动态设置标题,函数定义如下:

setTitle (Object title, object subtitle, Boolean redraw)               Since 2.1.0

参数:

  • title:新的标题对象
  • subtitle:新的副标题对象
  • redraw:是否重绘图表,默认为true

实例代码如下:

 

发表评论