highcharts属性介绍
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
$(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', //次级刻度线相对于轴线的位置,内,