一、 图表主要组成:
一般情况下,highcharts包含标题(title)、坐标轴(Axis)、数据列(Series)、数据提示框(Tooltip)、图例(legend)、版权标签(Credits)等,另外还可以包括导出功能按钮(Exporting)、标示线(PlotLines)、标示区域(PlotBands)、数据标签(dataLabels)等。
highcharts基本组成部分如下图所示:
1. 数据提示框(Tooltip):
当鼠标悬停在某点上时,以框的形式提示该点的数据,比如该点的值、数据单位等。数据提示框内提示的信息完全通过格式化函数动态指定。
2. 导出功能(Exporting):
通过引入exporting.js即可增加图表导出为常见文件功能。
3.标示线(PlotLine):
可以在图表上增加一条标示线,比如平均值线,最高值线等。
4. 表示区域(PlotBands):
可以在图表中添加不同颜色的区域带,表示出明显的范围区域。
二、图表配置:
1. 图表容器:
Highcharts 实例化中绑定容器的方式有很多种方式,这里列举三种:
(1) 通过构造函数
var charts = Highcharts.chart('container',{
//Highcharts 配置。
})
(2) 通过chart.renderTo来指定
var charts = Highcharts.chart({
// Highcharts 配置
chart : {
renderTo : 'container' // 或 document.getElementById('container')
}
});
(3) 如果你的页面已经引入了 jQuery,那么还可以 jQuery 插件的形式调用
$("#container").highcharts({
// Highcharts 配置
});
2. 图表的样式:
(1) 宽度、高度
Highcharts 图表的高度和宽度是根据 DIV 容器的宽高来设定的,即:
<div id="container" style="width:400px;height:400px"></div>
如果容器没有设定宽高,默认是 宽 400px, 高 400px,另外设置容器的 min-width 属性可以让 highcharts 自适应宽度,实例:
<div id="container" style="min-width:400px;height:400px"></div>
特别说明:饼图中可以通过设置宽高来让图形填充满整个容器。
(2) 图表样式:
图表样式属性包括 border、backgroundColor、margin、spacing、style等
- 边框:包括 borderColor、borderRadius、borderWidth
- 背景:包括 backgroundColor
- 外边距:包括 margin、marginTop、marginRight、marginBottom、marginLeft
- 内边距:包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
- 其他样式:其他属性例如字体等属性,实例代码
(3) 图表绘图区
图表绘图区的可配置属性有:
- plotBackgroundColor : 绘图区背景颜色
- plotBackgroundImage : 绘图区背景图片
- plotBorderColor : 绘图区边框颜色
- plotBorderWidth : 绘图区边框宽度
- plotShadow : 绘图投影
三、事件
- click :图表点击事件;
- load :图表加载完后事件;
- addSeries :图表增加序列事件;
- drilldown :图表下钻事件
- drillup : 图表上钻事件;
- redraw :图表重绘事件
- selection : 图表范围选择事件;
- beforePrint : 图表打印前事件
- afterPrint : 图表打印后事件
四、 其他配置
1、图表类型
通过 chart.type 来指定图表类型,表示如果默认图表类型。
2、图表缩放:
图表缩放包括缩放(zoom)和平移(pan),对应的属性有:
- zoomType : 缩放类型,值可以是 “x”、“y”、“xy”,分别表示水平缩放、竖直缩放、平面缩放;
- 缩放恢复按钮:可以指定按钮的样式、位置等,见 resetZoomButton,按钮的文字可以通过 lang 中的属性来指定
- selectionMarkerFill :选中背景色,详细参考 API 文档
- panKey:平移键,默认是 “Shift”,即在启用平移后,按住指定的按键即可对图表进行平移操作
- panning : 是否启用平移,启用平移后,按住平移键,然后就可以用鼠标对图表进行平移操作(即平移操作是平移键加鼠标拖动)
五、标题
标题默认显示在图表的顶部,包括标题和副标题(subTitle),其中副标题是非必须的。设置代码示例如下:
title: {
text: '我是标题'
},
subtitle: {
text: '我是副标题'
}
六、坐标轴
1. 坐标轴标题:
xAxis:{
title:{
text:'x轴标题'
}
}
yAxis:{
title:{
text:'y轴标题'
}
}
2、 坐标轴刻度标签
坐标轴标签(分类)。labels常用属性有enabled、formatter、step、staggerLines
1) enable
是否启用Labels。x,y轴默认值都是true,如果想禁用(或不显示)Labels,设置该属性为false即可。
2) Formatter(标签格式化函数)
默认实现是:
formatter:function(){
return this.value;
}
3) Step
Labels 显示间隔,数据类型为number(或int)。下图说明了step的用法和作用
4) staggerLines
水平轴 Labels 显示行数。(该属性只对水平轴有效)当 Lables 内容过多时,可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。