HighCharts（2）坐标轴5部分

先看一张图，有个预先认知：

1、坐标轴标题
没什么好说的，就不在这儿浪费时间了，自己看看文档OK的。

2、坐标轴刻度标签
Labels常用属性有enabled、formatter、step、staggerLines

2.1）enabled

是否启用Labels 标签，x和y轴默认值都是true。

2.2）Formatter

标签格式化函数。可以自定义坐标轴标签的格式，y轴默认是当前值this.value，当然我们也可以强行自定义一波，如下：

代码：

yAxis: {          labels: {    formatter:function(){      if(this.value <=100) {         return "第一等级("+this.value+")";      }else if(this.value >100 && this.value <=200) {         return "第二等级("+this.value+")";       }else {         return "第三等级("+this.value+")";      }    }  }}

效果：

可以看出来，Y轴已经被我们强行分了几个等级（即改变了标签格式）。

2.3）Step

Labels显示间隔，也就是步长的意思，数据类型为number（或int）。

上图可以明显看出来效果，左边步长的50，右边是100，请不要在意刻度线，它画在上面让你可以看的更直观。

2.4）staggerLines

水平轴 Labels 显示行数。（该属性只对水平轴有效）当 Lables 内容过多时，可以通过该属性控制显示的行数。这个还是很有用的，因为你开发中，很多时候，读取数据库的数据（x轴）是很多的，你不需要每个都表在图上，用staggerLines属性可以过滤掉没有什么价值的数据,但是更常用的是下面的tickInterval属性。

3、坐标轴刻度

Tick为坐标轴刻度。默认情况下x轴刻度高(tickLength属性)为5px，宽为1px；y轴宽为0px(也就是不显示刻度)。Tick相关的属性主要有tickLength、tickWidth、tickColor、tickInterval、tickmarkPlacement。

3.1）tickInterval
这几个属性，我就重点讲一下tickInterval

刻度间隔。其作用和Lables.step类似，就是不显示过多的x轴标签内容，不同的是，tickInterval是真正意义上的调整刻度，而Lables.step只是调整Labels显示间隔。所以在实际应用中，tickInterval用的多
另外，针对不同数据类型的坐标轴有不同的默认值。对于线性数据和Datetime类型数据，其默认值是tickPixelInterval值，对于Categorty表示间隔一个category。

3.2）tickmarkPlacement

刻度线对齐方式，有between和on可选，默认是between。设置为on后的变化如下图：

看得出来，数据的位置，一个而是放在刻度线上的，一个是在两条线之间

4、坐标轴网格线

坐标轴网格线。默认情况下，x轴网格线宽度为0,y轴网格线宽度为1px。网格线共有三个属性可设置，分别是: gridLineWidth、gridLineColor、gridLineDashStyle

这个没什么说的，知道是什么就行了，图上一条条平行于X轴的绿色虚线就是网格线。

5、多轴

多个轴。在Highcharts中， 坐标可以是多个，最常见的是多个y轴。多轴存在时，Axis是一个数组，而在赋值时，通过Axis数组的下标与数据关联。如下图所示：

基本格式就像上图展示的那样，接下来给出一个三级Y轴的例子：

js代码：

$(function () {    $('#container').highcharts({        chart: {            zoomType: 'xy'        },        title: {            text: '东京月平均天气数据'        },        subtitle: {            text: '数据来源: WorldClimate.com'        },        xAxis: [{            categories: ['一月', '二月', '三月', '四月', '五月', '六月',                         '七月', '八月', '九月', '十月', '十一月', '十二月'],            crosshair: true        }],        yAxis: [{ // Primary yAxis            labels: {                format: '{value}°C',                style: {                    color: Highcharts.getOptions().colors[2]                }            },            title: {                text: '温度',                style: {                    color: Highcharts.getOptions().colors[2]                }            },            opposite: true        }, { // Secondary yAxis            gridLineWidth: 0,            title: {                text: '降雨量',                style: {                    color: Highcharts.getOptions().colors[0]                }            },            labels: {                format: '{value} mm',                style: {                    color: Highcharts.getOptions().colors[0]                }            }        }, { // Tertiary yAxis            gridLineWidth: 0,            title: {                text: '海平面气压',                style: {                    color: Highcharts.getOptions().colors[1]                }            },            labels: {                format: '{value} mb',                style: {                    color: Highcharts.getOptions().colors[1]                }            },            opposite: true        }],        tooltip: {            shared: true        },        legend: {            layout: 'vertical',            align: 'left',            x: 80,            verticalAlign: 'top',            y: 55,            floating: true,            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'        },        series: [{            name: '降雨量',            type: 'column',            yAxis: 1,            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],            tooltip: {                valueSuffix: ' mm'            }        }, {            name: '海平面气压',            type: 'spline',            yAxis: 2,            data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],            marker: {                enabled: false            },            dashStyle: 'shortdot',            tooltip: {                valueSuffix: ' mb'            }        }, {            name: '温度',            type: 'spline',            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],            tooltip: {                valueSuffix: ' °C'            }        }]    });});

效果：

总结如下：

5.1 Series中设置每个轴值时，用轴数组下标关联（注意下标是从 0 开始的）。

5.2 设置opposite: true表示该轴位置反转，即为y轴时显示在右侧，为x轴时显示在顶部（和正常情况下x轴在下，y轴左构成反转）。

5.3 在Series中可以设置该轴的类型，多个轴不同的类型（例如：’type:’spline’），就构成了多种图表并存的混合图。