如何设置 highcharts X轴和Y轴值
highcharts所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调。
1、Axis Title
坐标轴标题。默认情况下,x轴为null(也就是没有title),y轴为'Value',设置坐标轴标题的代码如下:
xAxis:{
title:{
text:'x轴标题'
}
}
yAxis:{
title:{
text:'y轴标题'
}
}
2、Axis Labels
坐标轴标签(分类)。Labels常用属性有enabled、formatter、setp、staggerLines
1)enabled
是否启用Labels。x,y轴默认值都是true,如果想禁用(或不显示)Labels,设置该属性为false即可。
2)Formatter
标签格式化函数。默认实现是:
formatter:function(){
return this.value;
}
3)Step
Labels显示间隔,数据类型为number(或int)。
4)staggerLines
水平轴Lables显示行数。(该属性只对水平轴有效)当Lables内容过多时,可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。
3、Axis Tick
Tick为坐标轴刻度。默认情况下x轴刻度高(tickLength属性)为5px,宽为1px;y轴宽为0px(也就是不显示刻度)。Tick相关的属性主要有tickLength、tickWidth、tickColor、tickInterval、tickmarkPlacement。
1)tickLength、tickWidth、tickColor
分别代表刻度线的长度、宽度、颜色。
2)tickInterval
刻度间隔。其作用和Lables.step类似,就是不显示过多的x轴标签内容,不同的是,tickInterval是真正意义上的调整刻度,而Lables.step只是调整Labels显示间隔。所以在实际应用中,tickInterval用的多。
针对不同数据类型的坐标轴有不同的默认值。对于线性数据和Datetime类型数据,其默认值是tickPixelInterval值,对于Categorty表示间隔一个category。
3)tickmarkPlacement
刻度线对齐方式,有between和on可选,默认是between。
4、Axis gridLines
坐标轴网格线。默认情况下,x轴网格线宽度为0,y轴网格线宽度为1px。网格线共有三个属性可设置,分别是: gridLineWidth、gridLineColor、gridLineDashStyle
1)gridLineWidth
网格线宽度。x轴默认为0,y轴默认为1px。
2)gridLineColor
网格线颜色。默认为:#C0C0C0。
3)gridLineDashStyle
网格线线条样式。和Css border-style类似,常用的有:Solid、Dot、Dash。