highcharts属性介绍 本文关键词：属性，介绍，highcharts
highcharts属性介绍 本文简介：无标题文档$(function(){$(#container).highcharts({chart:{//通用参数//alignTicks:false,自动计算y轴数值，（true/false）backgroundColor:#A35393,//背景颜色borderColor:#699668,//边
highcharts属性介绍 本文内容：
无标题文档
$(function(){
$(
#container
).highcharts({
chart:{
//通用参数
//alignTicks:false,自动计算y轴数值，（true/false）
backgroundColor:
#A35393,//背景颜色
borderColor:
#699668,//边框颜色
borderRadius:
50,//圆角边框
borderWidth:
10,//边框宽度
//height:
600,//图形高度
width:800,//图形宽度
ignoreHiddenSeries:true,//自动调整剩余的数据轴
//inverted:true,x轴跟y轴位置互换
//margin:[0,0,0,0],//marginBottom:100,//图形跟边框之间的距离marginLeft
marginRight
marginTop
zoomType:
x,//图形沿x轴放大
panning:
true,//图形放大时，按shift键拖动图形
panKey:
shift,resetZoomButton:{//当图形放大之后，会出现一个按钮，点击之后还原图形
position:{
x:0,y:-30
},theme:{//设置按钮样式
fill:
white,//填充白色
stroke:
silver,//银色边框
r:0,states:{
hover:{//鼠标经过样式
fill:
#417256,style:{
color:
white
}
}
}
},relativeTo:
chart
//更改按钮位置，默认在图形区域内（plot）
},plotBackgroundImage:
bizhi0422.jpg,//图形区域设置背景图片
plotBorderColor:
#FF0000,plotBorderWidth:
5,//图形区域加边框
plotBackgroundColor:
#00FF00,//设置图形区域背景颜色
plotShadow:true,//设置图形区域阴影
shadow:true,//向下投影
style:{//设置图表区域的字体样式.可以添加别的css样式
fontFamily:
serif
},animation:{//动画效果
duration:
1000,easing:
easeOutBounce
},polar:true,//极地坐标图
type:
line
//设置图形样式line：折线图，bar：横向柱状图，spline：曲线图，scatter：分散定点图，pie：饼状图，area：区域堆积图，column：柱状图
},xAxis:{
//X轴属性
//categories:[
Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec
]//设置常规的类别轴
dateTimeLabelFormats:{
day:
%e
of
%b
//天
//millisecond:
%H:%M:%S:.%L,毫秒
//second:
%H:%M:%S,秒
//minute:
%H:%M,分
//hour:
%H:%M,时
//week:
%e.%b,周
//month:
%b/
%y,月
//year:
%Y
年
},labels:{
rotation:90,//设置x轴坐标旋转
staggerLines:2,//分两行显示轴标签
step:2,//设置轴标签间隔
style:{
//设置轴标签的样式
color:
red,fontWeight:
bold
},},minRange:
50,//设置x轴的最小取值范围
reversed:
true,//设置X轴逆转
startOnTick:
true,//强制轴线在标签处开始
tickColor:
#FF0000,//设置刻度线颜色
tickWidth:
3,//设置刻度线宽度
//
属性基本跟Y轴一样
},yAxis:[{
//Y轴属性
allowDecimals:
false,//不允许刻度值为小数，默认允许
alternateGridColor:
#965685,//设置隔行显示的颜色
floor:
0,//设置最低的自动计算的坐标刻度值
ceiling:
1000,//设置最高的
gridLineColor:
#197F07,//设置网格线颜色
gridLineDashStyle:
longdash,//设置线条样式，长破折号
//
solid
实线
shortdash
短破折号
shortdot
短点
shortdashdot
shortdashdotdot
dot
dash
dashdot
longdashdot
longdashdotdot
gridLineInterpolation:
polygon,//设置极地坐标的样式，还可以为
circle
gridLineWidth:2,//设置线条的宽度
labels:{//y轴文字标签
//enabled:false,禁止使用轴标签
，默认是true
align:
center,x:0,//设置轴标签相对于轴刻度在水平方向的偏移度
默认：3
y:-2,//设置轴标签相对于轴刻度在y轴方向的偏移度
默认：3
format:
{value}
km,//格式化y轴标签
overflow:
justify,//水平轴溢出设置，默认为false
},lineColor:
#FF0000,//设置y轴轴线的颜色
lineWidth:
1,//设置y轴轴线的宽度
max:
200,//设置y轴的最大值
endOnTick:
false,//为true时max可能被四舍五入
maxPadding:
0.25,//设置y轴的最大内边距
min:
0,//设置y轴的最小值
如果是null，自动计算最小值
startOnTick:false,//为true时min可能被四舍五入
minPadding:
0.25,//设置y轴的最小内边距
minorGridLineColor:
#C5EEFA,//设置次级网格线的颜色
minTickInterval:
auto,//坐标轴的值刻度间隔
minorGridLineDashStyle:
longdash,//次级网格线的样式
minorTickWidth:
0,//次级刻度线的宽度
minorTickColor:
#A0A0A0,//次级刻度线的颜色
minorTickInterval:
auto,//次级刻度线的间隔
minorTickLength:
10,//次级刻度线的长度
minorTickPosition:
inside,//次级刻度线相对于轴线的位置，内，（outside）外
offset:
70,//y轴离图形区的距离
reversed:
true,//设置Y轴逆转
reversedStacks:
true,//第一个数据放上面，（false）第一个数据放下面
showEmpty:
true,//坐标轴没有数据时显示轴线和标题
（false）不显示
showFirstLabel:
true,//显示第一个轴标签
（false）
showLastLabel:
true,//显示最后一个标签
（false）
stackLabels:{
//堆栈图形或条形图形
enabled:true,//启用堆栈总标签
align:
right,//水平对齐方式
style:{
//标签样式
color:
black,font-size
:
11px,line-height
:
14px
},rotation:
-45,//标签旋转角度
textAlign:
left,//标签文本对齐方式
verticalAlign:
top,//堆栈总标签垂直对齐
x:
-50,//标签相对于堆叠柱的水平方向
y:
-30
//标签相对于堆叠柱顶部的垂直偏移量
},title:{
text:
Primary
Axis
}
},{
title:{
text:
Secondary
Axis
},opposite:
true//显示两个Y轴坐标
}],title:{
//一级标题
text:
Title
aligned
left,//标题的名称
align:
left,//图表标题水平对齐方式
verticalAlign:
bottom,//标题垂直对齐方式
floating:
true,//标题是否浮动，为true时，标题不占空间
margin:
50,//标题与图形区域的间隔
style:
{
//设置标题的css样式
color:
#FF00FF,fontWeight:
bold
},x:70,//相对于水平方向的偏移量
y:70//相对于垂直方向的偏移量
},subtitle:{
//图表副标题
align:
center,//标题水平居中
//subtitle
的属性跟
title
的属性一样
},legend:
{
//图例属性
enabled:
true,//图例开关，默认开启
layout:
vertical,//图例数据项的布局
backgroundColor:
#FFFFFF,//图例容器的背景颜色
borderColor:
#909090,//图例容器的边框颜色
borderRadius:
5,//图例容器的边框圆角
borderWidth:
5,//图例容器的边框宽度
floating:
true,//图例容器可以浮动，当此值设置为false时，图例是不可在数据区域图之上，它们是不可重叠的，而设成true，则可。默认是：
false
align:
left,//图例容器水平对齐在图表区
x:100,//图例X轴偏移量
verticalAlign:
top,//图例的垂直对齐方式
y:70,//图例Y轴偏移量
title:{
//图例标题
text:
City,//标题文本
style:{
//标题样式
fontStyle:
italic
}
},},tooltip:
{
//数据提示属性
animation:
true,//启用数据提示框的动画效果，默认true
backgroundColor:
#FCFFC5,//设置数据提示框的颜色，可以设置成渐变色
backgroundColor:{
//设置数据提示框的渐变色
linearGradient:[0,0,70,60],stoops:[
[0,#FFFFFF
],[1,#E0E0E0
]
]
},borderColor:
#000000,//设置数据提示框的边框颜色，默认null
borderRadius:
10,//数据提示框圆角
borderWidth:
5,//提示框的宽度
crosshairs:[{
//十字准线
width:
3,color:
green
},{
width:
3,color:
red
}],enabled:
true,//启用提示框
shadow:
true,//启用提示框的阴影
style:{
//为提示框提供css样式
padding:10,fontWeight:
bold
},valueDecimals:
2,//提示框小数保留位数
valuePrefix:
$,//字符前置在Y轴数值之前
valueSuffix:
USD,//字符后置在Y轴数值之后
formatter:
function(){//
回调函数格式化提示框中的文本
return
+
this.series.name
+
+
this.x
+
:
+
this.y;
}
},series:[{
//设置图形数据
data:
[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4]
},{
data:
[129.9,271.5,306.4,29.2,544.0,376.0,435.6,348.5,216.4,294.1,35.6,354.4],yAxis:1,pointStart:Date.UTC(2015,0,1),//设置日期
pointInterval:
24
3600
1000//一天
}],credits:{
//版本信息属性
//enabled:false//去除版本信息，默认是true，显示highcharts的官网
text:
HCharts.cn,//要显示版本信息的文本
href:
http://www.hcharts.cn,//点击链接到的地址
position:{//设置版本信息显示位置
align:
left,x:10,//左右移动
verticalAlign:
bottom,y:-5//上下移动
},style:{//设置文本的样式
cursor:
pointer,//鼠标放在上面的样式
color:
#0000FF,//字体颜色
fontSize:
20px
//字体大小
}
}
});
});