Question

如何设置 highcharts X轴和Y轴值

Answer 1

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。

详细请参考：http://www.hcharts.cn/docs/index.php?doc=basic-axis