highCharts相关属性
引入文件
// highcharts基础js文件(必须)
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
// 其他需引入的文件
https://www.highcharts.com.cn/docs/start-download
函数写法
// 在绘图前给 Highcharts 准备一个 DOM 容器,并指定其大小
<div id="container" style="width: 600px;height:400px;"></div>
// 图表初始化函数
var chart = Highcharts.chart('container', options);
var options = {
// 图表区选项
chart: {
},
// 标题选项
title: {
},
// X轴选项
xAxis: {
},
// y轴选项
yAxis: {
},
// 数据列选项
series: [
]
};
1.Chart:图表区选项
Chart:{
// 指定图表的类型,默认是折线图(line)
// 可选参数spline,scatter,splinearea,bar,pie,area,column
type: 'line',
// 图表的页面显示容器(也就是要显示到的div)
renderTo: 'container',
// 背景颜色
backgroundColor: "#092A3A",
// 外框阴影
shadow:true,
// 圆角
borderRadius:5,
// 边框宽度,边框颜色(两个配合使用)
borderWidth:5, borderColor:"#99091c",
// 让图表自适应图表容器
reflow: true,
// 绘图区边框宽度
plotBorderWidth:1,
// 绘图区背景色
plotBackgroundColor:"#99091c",
// 绘图区背景图
plotBackgroundImage:"./1.jpg",
// 绘图区边框色
plotBorderColor:"#99091c",
// 绘图区阴影
plotShadow: false,
// 图表的宽度
width: 1000,
// 图表的高度
height: 300,
// 图表外边缘跟绘图区域之间间距(默认4个参数,数组格式,上右下左)
margin: [20,23,23,23],
// 等同上边margin属性
marginLeft: 60,
marginTop: 60,
marginRigth: 60,
marginBottom: 60,
// 置(调换x,y轴)
inverted: false,
// 是否在初始化的时候显示坐标轴, 仅适用于初始化时数据列为空的(动态添加数据列)图表
showAxes: false,
// 图表的内边距,指图表外边缘和绘图区之间的距离, 默认是:[10, 10, 15, 10]
spacing:[10, 10, 15, 11]
// 等同上边spacing属性
spacingTop: 100,
spacingRight: 10,
spacingBottom: 15,
spacingLeft: 10,
}
2.title:标题选项
title:{
// 标题文字
text: '月份平均温度',
// 水平偏移量
x: -20,
// 垂直偏移量
y: 100
// 水平方向(left, right, bottom, top)
align: 'right',
// 垂直方向(left, right, bottom, top)
verticalAlign: "left"
// 是否浮动显示(效果就是会不会显示到图中)
floating: true,
// 标题和图表区之间的边距,若存在副标题,则指副标题和图表区之间的边距。 默认是:15
margin: 15,
//标题的css样式(例如:颜色,字体,字号)
style: {
},
// 是否使用HTML渲染标题,默认false
useHTML:false,
}
3.subtitle:副标题选项
subtitle:{
// 标题文字
text: '月份平均温度',
// 水平偏移量
x: -20,
// 垂直偏移量
y: 100
// 水平方向(left, right, bottom, top)
align: 'right',
// 垂直方向(left, right, bottom, top)
verticalAlign: "left"
// 是否浮动显示(效果就是会不会显示到图中)
floating: true,
// 标题和图表区之间的边距,若存在副标题,则指副标题和图表区之间的边距。 默认是:15
margin: 15,
// 标题的css样式(例如:颜色,字体,字号)
style: {
},
// 是否使用HTML渲染标题,默认false
useHTML:false,
}
5.xAxis:X轴选项
xAxis:[{
// 坐标轴类型可以是 "linear(线性轴)","logarithmic(对数轴)","datetime(时间轴),category(分类轴)"之一,
// 在时间轴中,坐标轴值是以毫秒为单位的数字(时间戳),坐标轴标签显示的则是对应间隔(年、月、日、小时等)的格式化字符串(都可以自定义),也就是说在时间轴中,x值是时间戳,至于想要显示什么,完全可以根据需求进行格式化。
// 在分类坐标轴中,如果有没有指定分类 categories 数组,那么分类将使用数据列中的数据点的名字(数据点的 names 属性)。
// 默认是:linear.
type: "linear"
// x坐标轴显示的数据
categories: ['一月', '二月'],
// 是否允许刻度轴显示小数(默认显示)
allowDecimals: false
// 在图表中相隔出现纵向的颜色格栅,相邻刻度线之间会用对应的颜色来绘制颜色分辨带(隔行变色)
alternateGridColor: 'red',
// 事件格式化函数
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
//endOnTick: false, //是否显示控制轴末端的一个cagegories出来
//events: {
//setExtremes:
//},
// x轴刻度线
tickWidth: 0,
// x轴刻度线的颜色
tickColor: 'blue',
// x轴刻度线的间距
tickInterval: 20,
// x轴刻度线的长度
tickLength: 5,
// 本参数只对分类轴有效,当值为 on 时刻度线将在分类上方显示;当值为 between 时,刻度线将在两个分类中间显示。当 tickInterval 为 1 时,默认是 between,其他情况默认是 on。 默认是:null
tickmarkPlacement: "on",
// x轴线之间的间距
tickPixelInterval: 60
// x轴线的方向的位置(参数:outside外,inside里)
tickPosition: "inside",
// 纵向格线的颜色
gridLineColor: "#093144",
// 纵向格栅线条的类型
gridLineDashStyle: 'ShortDash',
// 纵向格线的的大小
gridLineWidth: 1,
// 通过id值获取轴对象
id: null,
// X轴的标签(下面的说明)
labels: {
// x轴刻度跟值的位置(center,left,rigth)
align: "center",
// 是否显示刻度值
enabled: false,
// 格式化函数
formatter: '',
// x轴数值的单位
format:'{value}km',
// 顺时针旋转x轴数值(效果就是影响标签数值的显示方向)
rotation: 90,
// x轴数值分行的交错显示(上、下)
staggerLines: 4,
// x轴数值显示的间隔
step: 2,
// x轴数值的css样式
// 使用 whiteSpace: 'nowrap' 来阻止文本换行,
// textOverflow: 'none' 来阻止文本过长时以省略号的形式显示。
// 在 CSS 样式模式 中,轴标签可以通过 .highcharts-axis-labels 样式类来控制。
style:{
color: "#666666",
cursor: "default",
fontSize: "11px"
},
// 水平偏移量
x: 100,
// 垂直偏移量
y: 40
},
// X轴的颜色(需要搭配lineWidth使用)
lineColor: "red",
// X轴的宽度
lineWidth: 5,
// 在x轴图例对应的上方额外显示刻度值(参数为1隐藏,为2展示)
linkedTo:1,
// 在x轴图例对应的上方额外显示刻度值(参数为false隐藏,为true展示)
opposite: true //是否把标签显示到对面
// 刻度值的最大值
max: 12,
// 坐标轴每个刻度之间的间距(默认值0.01)
maxPadding: 6,
// 2.2版本废弃
maxZoom: 1,
// 坐标轴每个刻度之间的间距的最小范围
minRan0ge:10,
// 刻度值的最小值
min: 10,
// 副格线的颜色(英语本的格格)
minorGridLineColor: 'red',
// 副格线的的样式(参数有:dot(点)solid(实线)dash(虚线)blod(跟实线差不多))
minorGridLineDashStyle: 'blod',
// 副格线的宽度
minorGridLineWidth: 50,
// 坐标轴刻度线的宽度(副格线最边上的刻度)
minorTickColor: '#A0A0A0',
// 副格线的每格的间距
minorTickInterval:3,
// 副格线的长度
minorTickLength: 10,
// 副格线刻度的位置(参数:outside外,inside里)
minorTickPosition: 'inside',
// 副格线刻度的宽度
minorTickWidth: 5,
// 距离x坐标轴的最小内边距(默认0.01)
minPadding: 0.01,
// 坐标轴距离绘图区的距离
offset: 0,
// 使某数据块显示不同的效果
plotBands:[{
// 边框颜色
borderColor:
// 边框宽度
borderWidth:
// 类名
className:
// 样式
color:
// 事件
events:
// 开始值
from:
// 结束值
to:
// 编号
id:
label: {}
// 层叠
zIndex
}],
// 标示线是用来标记坐标轴上特殊值的一条直线,在绘图区内绘制一条自定义的线。
plotLines:[{
// 类名
className:,
// 颜色
color:"#ccc",
// 线条样式
dashStyle:"longdashdot",
// 事件
events: ,
// 编号
id:
label: {},
// 值
value: ,
// 宽度
width: ,
// 层叠
zIndex: ,
}],
// x轴刻度值是否倒置
reversed: true,
// 是否显示第一个轴标签(即是在x轴第一个刻度值前空出来一个,需要搭配startOnTick使用)
showFirstLabel: false,
startOnTick: true,
// 从第几周开始(参数 0-6(0为周末。以此类推))
startOfWeek: 2,
//x轴的标题
title: { //设置坐标标题的相关属性
margin: 40,
rotation: 90,
text: "Y-values",
align: "middle",
enabled: "middle",
style: {color: 'red'}
},
}]
6.yAxis:Y轴选项
等同x轴参数
7.Series:数据列选项
8.plotOptions:数据点选项
9.tooltip:数据点提示框
// 提示框设置
tooltip:{
// 格式化提示框的内容样式,默认支持的 HTML 标签有:<b>,<strong>,<i>,<em>,<br/>,<span>。
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
},
// 背景颜色
backgroundColor: '#CCCCCC',
// 边框颜色
borderColor: '#FCFFC5',
// 边框的圆角大小
borderRadius: 2,
// 边框宽度(大小)
borderWidth: 3,
// 是否显示提示框
enabled: false,
// 提示框是否应用阴影
shadow: false,
// 当打开这个属性,鼠标几个某一区域的时候,如果有多条线,所有的线上的据点都会有响应
// 当提示框被共享时,整个绘图区都将捕捉鼠标指针的移动。提示框文本显示有序数据(不包括饼图,散点图和标志图等)的系列类型将被显示在同一个提示框中
shared: true,
// 没有看出明显效果
snap: 0,
// 交叉点是否显示的一条纵线(4.1版本已经废弃)
crosshairs: {
width: 2,
color: 'gray',
dashStyle: 'shortdot'
},
// 提示框内容的样式
style: {
color: 'white',
padding: '10px', //内边距 (这个会常用到)
fontSize: '9pt',
},
// 数值后缀(参数为string)
valueSuffix:'cm',
// 数值前缀
valuePrefix:'cm',
// 数据提示框数据值小数保留位数,可以在每个数据列的tooltip对象中对某个数据列单独设置。默认保留所有小数。
valueDecimals:1,
// 时间轴格式化(参数为时间的格式)
xDateFormat:'%Y-%m-%d',
}
10.Legend:图例选项
// 图例说明
legend: {
// 图例说明布局(vertical:垂直显示,horizontal:水平显示)
layout: 'vertical',
// 水平对齐方式(left,center,right)
align: 'center',
// 图例放置位置(top,middle,bottom)
verticalAlign: 'top',
// X轴偏移量,类似于margin参数
x: 250,
// y轴偏移量,类似于margin参数
y: 0,
// 图例边框宽度
borderWidth: 1,
// 图例边框颜色
borderColor: 'red',
// 背景颜色
backgroundColor: 'red'
// 图例容器的宽度
width:100,
// 边框圆角
borderRadius:5,
// 是否显示图例说明
enabled: false,
// 是否浮动显示(效果就是会不会显示到图中)
floating:true,
// 图例说明的顺序(是否反向)
reversed:true,
// 鼠标点击图例参数,图例文字颜色改变的颜色
itemHiddenStyle: {
color: 'red'
},
// 鼠标悬浮图例参数,图例文字颜色改变的颜色
itemHoverStyle: {
color: 'red'
},
// 图例的css样式
itemStyle: {
fontSize:30,
color: 'red'
}
// 图例每一项的宽度
itemWidth:100,
// 图例文字内容
labelFormatter: function() {
// this指的是series对象
return this.value
}
// 图例的行高,默认16(2.1版本已经废弃)
lineHeight: 1000,
// 给图例项盒子阴影(需要同时设定backgroundcolor属性)
shadow:true,
// 当为true时,图例原点的长、宽将相等。长、宽尺寸默认与图例项字体大小一致,默认是:true.
squareSymbol:true,
// 图例原点与图例文字之间的间距(默认值 5)
symbolPadding: 100,
// 图例原点的宽度。当squareSymbol 属性设定后,此设定默认值取 symbolHeight,否则为16。
symbolWidth: 100
}
11.credits: 公司信息
redits: {
// 隐藏公司信息
enabled: false
},
12.exporting: 导出信息
exporting: {
// 隐藏导出信息
enabled: false
},