HighCharts（2）坐标轴5部分

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



1、坐标轴标题

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

2、坐标轴刻度标签

Labels常用属性有enabled、formatter、step、staggerLines

2.1）enabled

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

2.2）Formatter

标签格式化函数。可以自定义坐标轴
4000
标签的格式，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’），就构成了多种图表并存的混合图。