Highcharts学习之坐标轴
发布于 2016-10-22 07:56:13 | 146 次阅读 | 评论: 0 | 来源: 网友投递
Highcharts 纯Javascript图表
Highcharts是一个制作图表的纯Javascript类库
今天讲交互图表Highcharts的坐标轴，我们将对Highcharts图表的坐标轴组成、坐标轴类型等进行详细系统讲解。下面一起来看看。
前言
所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。
下面一起来学习学习Highcharts的坐标轴。
tags:
1.标题
xAxis:{
title:{
text:'x轴标题'
}
}
yAxis:{
title:{
text:'y轴标题'
}
}
2.标签
labels:enabled、formatter、setp
yAxis:{
labels:{
enabled:true,
formatter:function(){
if(this.value <=3) {
return "第一等级("+this.value+")";
}else if(this.value >3 && this.value <=5) {
return "第二等级("+this.value+")";
}else {
return "第三等级("+this.value+")";
}
},
step:1 //间隔几个线显示一次
}
3.网格
1.gridLineWidth
网格线宽度。x轴默认为0，y轴默认为1px。
2.gridLineColor
网格线颜色。默认为：#C0C0C0。
3.gridLineDashStyle
网格线线条样式。和Css border-style类似，常用的有：Solid、Dot、Dash。
yAxis:{
//gridLineWidth:'1px', //注意如果使用了这个属性gridLineDashStyle会不起作用
gridLineColor:'#019000',
gridLineDashStyle:'Dash',
}
4.类型
xAxis:{
categories:['A','B','C']
},
yAxis:{
type:'datetime'
},
5.reversed
倒置是将轴翻转而不是x、y对调。例如y轴倒置的结果是y轴是从最大的值开始的，最小值反而在最下方
xAxis:{
categories:['A','B','C'],
reversed:true
},
yAxis:{
type:'datetime',
reversed:true
},
6.opposite
当其值设置为true时，x轴和y轴显示的位置分别上下，左右对调。
xAxis:{
categories:['A','B','C'],
opposite:true
},
yAxis:{
type:'datetime',
opposite:true
}
7.inverted
chart:{
type:'line',
style:{
fontSize:"17px",
},
inverted:true
}
8.min、max
控制数轴的最小值和最大值。
注意：控制allowDecimals、min、max 属性你可以轻松控制数轴的显示范围等（这也是很常见的问题）
总结
以上就是本文的全部内容了，大家学会了吗？小编还会继续更新Highcharts的文章，对Highcharts感兴趣的朋友们要继续关注phperz，希望本文给大家学习带来的帮助。