6.1 坐标轴的基本构成
在数学中，坐标轴非常简单。但是在图表中，坐标轴不仅包含坐标轴本身，还包括一些辅助元素。坐标轴和这些辅助元素构成完整的坐标轴系统。在Highcharts中，坐标轴由轴线、刻度、网格线、标志线和条带5个部分构成，如图6.1所示。
图6.1 坐标轴的构成
6.1.1 构建坐标轴
在Highcharts中，坐标轴是使用组件xAxis和yAxis构建的。其中，xAxis表示横坐标，yAxis表示纵坐标。其语法分别如下：
xAxis:{
//相关配置项
}
yAxis:{
//相关配置项
}
这两个组件都是图表选项的顶级子元素。
1．反转坐标轴
默认情况下，xAxis表示横坐标，yAxis表示纵坐标。但根据需要，也可以反转坐标轴，让xAxis表示纵坐标，yAxis表示横坐标。这需要在组件chart设置配置项inverted。其语法如下：
inverted: Boolean
其中，配置项的值为布尔类型。当值为true时，反转坐标轴；值为false时，不反转。默认值为false。
【实例6-1：inverted】下面反转坐标轴显示，修改代码如下：
chart: {
inverted:true //设置坐标轴反转
},
执行代码后，效果如图6.2所示。从图中可以看出，x轴和y轴的位置颠倒，折线图也跟着相应颠倒。
图6.2 坐标轴反转显示
2．强制显示坐标轴
如果图表没有数据，这时图表被称为空图表。空图表默认不显示坐标轴，如图6.3所示。这样不便于浏览者无法从坐标轴上了解数据可能的结构。
图6.3 空图表
这时如果想要显示坐标轴，必须设置组件chart的配置项showAxes。其语法如下：
showAxes: Boolean
其中，showAxes的值为布尔类型。当值为true时，强制显示坐标轴；值为false时，不显示坐标轴。默认值为false。
【实例6-2：showAxes】下面强制空图表显示坐标轴，修改代码如下：
chart: {
showAxes:true //强制显示坐标轴
},
执行代码后，效果如图6.4所示。由于我们没有对坐标轴进行设置，从图中只能看到坐标轴的一些默认信息。
图6.4 强制显示坐标轴
和强制显示坐标轴相关的配置项还有showEmpty。它用来设置当坐标轴上没有关联数据时，是否显示坐标轴。其语法如下：
showEmpty: Boolean
该配置项的值为布尔类型。当值为true时，强制显示坐标轴；当值为false时，不显示坐标轴。默认值为true。
6.1.2 坐标轴组
在图表中，默认有两个坐标轴。用户根据需要还可以添加更多的坐标轴。增加的坐标轴会构成一个坐标轴组。无论增加的坐标轴有多少，都只能在xAxis和yAxis内。下面依次讲解添加坐标轴的方式。
1．坐标轴数组
虽然在前面讲解的都是单一坐标轴，实际上，组件xAxis和yAxis的值可以为数组。形式如下：
xAxis:[{
//第一个坐标轴配置项
},{
//第二个坐标轴配置项
}
..... //更多坐标轴配置项
]
在组件xAxis中，第一个坐标轴会默认编号为0，第二个坐标轴编号为1，以此类推。组件yAxis的配置类似，这里不再列举。
2．设置坐标轴id
虽然组件xAxis和yAxis会对坐标轴设置编号，但为了便于区分使用，每个坐标轴还包含一个配置项id，用来标识自身。其语法如下：
id: String
其中，参数String表示坐标轴的ID字符串。该字符串可以具备实际含义，便于用户区分不同的坐标轴。
【实例6-3：id】下面为组件yAxis添加两个坐标轴，修改代码如下：
yAxis: [{ //第一个坐标轴
id: 'No1', //设置坐标轴id
title: {
text:'第一个坐标轴'
}
},
{ //第二个坐标轴
id: 'No2', //设置坐标轴id
title: {
text:'第二个坐标轴'
}
}
]
为了方便识别两个坐标轴，这里为每个坐标轴添加了不同的标题。关于标题所使用的配置项title，会在后面讲解。执行代码后，效果如图6.5所示。从图中可以看到，两个坐标轴都显示在图中左侧。
图6.5 两个纵坐标轴
3．设置坐标轴显示位置
当xAxis和yAxis包含多个坐标轴的时候，可以设置坐标轴显示在不同的位置。例如，xAxis的坐标轴可以显示在图表的上下两侧，默认都是显示底端。yAxis的坐标轴可以显示在图表的左右两侧，默认都显示在左侧。这时需要使用配置项oppsite。其语法如下：
opposite: Boolean
其中，配置项opposite的值为布尔类型。当值为true时，坐标轴显示是默认位置的另外一端；当值为false时，坐标轴显示在默认位置。
【实例6-4：opposite】下面设置yAxis的两个坐标轴分别在左右两侧显示，修改代码如下：
yAxis: [{
id: 'No1',
title: {
text:'第一个坐标轴'
}
},
{
id: 'No2',
opposite: true, //设置坐标轴显示的位置
title: {
text:'第二个坐标轴'
}
}
]
执行代码后，效果如图6.6所示。从图中可以看出，第二个坐标轴显示在图表的右侧了。
图6.6 设置坐标轴显示位置
4．设置坐标轴关联
在同一组中的坐标轴可以设置互相关联。这样多个坐标轴拥有共同的极值，更容易表示坐标轴的数据。这时需要使用配置项linkedTo。其语法如下：
linkedTo: Number
其中，参数Number用来指定坐标轴编号。第一个坐标轴的编号为0，第二个坐标轴的编号为1，以此类推。
【实例6-5：linkedTo】下面设置yAxis的第二个坐标轴和第一个坐标轴关联，修改代码如下：
yAxis: [{
id: 'No1',
title: {
text:'第一个坐标轴'
}
},
{
id: 'No2',
opposite: true,
linkedTo: 0, //设置坐标轴关联
title: {
text:'第二个坐标轴'
}
}
]
执行代码后，效果如图6.7所示。从图中可以看出，第二个坐标轴具有和第一个坐标轴相同的刻度了。
图6.7 设置坐标轴关联
6.1.3 动态添加／删除坐标轴
在实际应用中，往往需要动态添加数据列和对应的坐标轴。在Highcharts中，可以使用图表对象方法addAxis()方法动态添加。其语法如下：
addAxis (Object options, [Boolean isX], [Boolean redraw], [Mixed animation])
其中，参数options指定坐标轴配置项；参数isX指定该坐标轴是否添加到xAxis组中；参数redraw指定是否重绘图表，默认值为true；参数animation指定是否采用动画效果，默认值为true。
【实例6-6：addAxis】下面动态为yAxis添加坐标轴，并设置显示位置，修改代码如下：
$(document).ready(function () {
var options = {
chart: {
},
title: {
text: '北京一周最高温度'
},
series: [{
name: '2015最高温度',
data: [6, 6, 7, 4, 5, 6, 8]
}
],
credits: {
text: '大学霸',
href: 'http://daxueba.net'
},
yAxis: [{
id: 'No1',
title: {
text:'第一个坐标轴'
}
} ]
};
$('#container').highcharts(options); //创建图表
var chart; //定义图表变量
chart = $('#container').highcharts(); //获取图表对象
chart.addAxis({ //设置配置项
id: 'N02',
opposite: true,
linkedTo: 0,
title: {
text: '第二个坐标轴'
}
}, false, false, true); //添加坐标轴
});
执行代码后，效果如图6.8所示。从图中无法找到代码中添加的坐标轴。
图6.8 动态添加坐标轴
这是因为添加坐标轴时候，我们没有要求图表重绘。修改如下代码：
chart.addAxis({ //设置配置项 id: 'N02', opposite: true, linkedTo: 0, title: { text: '第二个坐标轴' } }, false,true, true); //添加坐标轴
再次执行代码，效果如图6.9所示。这时，图中就显示添加的第二个坐标轴。
图6.9 重绘后的图表
在很多时候，用户需要将不再使用的坐标轴删除。这个时候，需要使用图表对象的方法get()获取坐标轴对象，然后再使用坐标轴对象的方法remove()删除。这两个方法的语法如下：
get (String id) remove (Boolean redraw)
其中，id表示坐标轴的id字符串；参数redraw表示删除后，是否重绘图表，默认值为true。
【实例6-7：remove】下面动态删除原有的坐标轴，修改代码如下：
$(document).ready(function () {
var options = {
chart: {
},
title: {
text: '北京一周最高温度'
},
series: [{
name: '2015最高温度',
data: [6, 6, 7, 4, 5, 6, 8]
}
],
credits: {
text: '大学霸',
href: 'http://daxueba.net'
},
yAxis: [{ //坐标轴1
id: 'No1',
title: {
text:'第一个坐标轴'
}
} ]
};
$('#container').highcharts(options);
var chart;
chart = $('#container').highcharts();
chart.addAxis({
id: 'No2',
opposite: true,
linkedTo: 0,
title: {
text: '第二个坐标轴'
}
}, false, true, true);
chart.get('No1').remove(); //获取坐标轴1，并移除
});
执行代码后，效果如图6.10所示。从图中可以看出，原有的坐标轴被移除了，和该坐标轴相关的数据列也不显示了。
图6.10 移除原有的坐标轴
6.1.4 坐标轴类型
在Highcharts中，坐标轴的刻度往往根据数据列数据计算获得，然后进行显示。根据计算的方式，坐标轴的类型分为线性、指数型、日期时间型和种类类型。坐标轴类型通过配置项type设置。其语法如下：
type: String
其中，参数String指定坐标轴的类型，允许的值包括linear（线性）、logarithmic（指数型）、datetime（日期时间型）和category（分类类型）。
1．线性linear
线性类型坐标轴是最常见的。我们前面看到的坐标轴基本都是这个类型的。坐标轴都是根据数据列的数据进行计算，然后等分坐标轴，显示刻度。
2．指数型logarithmic
当数据列的数据分布范围很大的时候，再使用线性方式，会使大部分数据值集中在某个区域内，而无法充分展示数据值的不同。
【实例6-8：logarithmic】下面构建一个图表，显示一个网站的上午时段的页面点击量。代码如下：
var options = {
chart: {
},
title: {
text: '网站访问人次'
},
series: [{
name: '点击次数',
data: [10, 23, 58, 130, 400, 1205, 4289] //页面点击量
}
],
credits: {
text: '大学霸',
href: 'http://daxueba.net'
},
yAxis: [{
type:'linear'
}]
};
$('#container').highcharts(options);
});
执行代码后，效果如图6.11所示。由于数据列分布的范围很大，所以造成前5个数据都显示在0k～2k的区域内，无法直接从图上看到前5个数据的大致值。
图6.11 网站页面点击次数
下面将坐标轴的类型改为指数型，修改代码如下：
yAxis: [{
type:'logarithmic'
}]
执行代码后，效果如图6.12所示。这时，坐标轴按照10倍的方式递增，刻度分别为1、10、100、1k、10k。而7个数据值较为平均分布在各个刻度区间之内，从而便于浏览者快速查看数据。
图6.12 指数型坐标轴
3．日期时间型datetime
时间日期类型数据很常用，且不同于常见的数据。Highcharts为这类数据做了单独处理，允许用户设置坐标轴为日期时间型，如图6.13所示。
图6.13 日期时间型坐标轴
4．分类类型category
用户也可以通过数据列单独指定坐标轴上刻度显示的内容。这时坐标轴显示的数据由数据列的节点的配置项name所决定，如图6.14所示。具体实现方式将在后面的内容中讲解。
图6.14 分类类型坐标轴