Highcharts学习之坐标轴

更新时间：2016年08月02日 17:32:34 投稿：daisy

今天讲交互图表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感兴趣的朋友们要继续关注脚本之家，希望本文给大家学习带来的帮助。

您可能感兴趣的文章:

highcharts

require.js深入了解 require.js特性介绍
这篇文章主要介绍了require.js深入了解,require.js特性介绍,本文讲解了require.js和CommonJS的兼容、CDN回退、循环依赖、BaseUrl、JSONP等内容,需要的朋友可以参考下
2014-09-09
Highcharts入门之基本属性
Highcharts是一个用纯JavaScript编写的一个图表库，之前小编发了一篇介绍Highcharts的文章，那么本文将进一步的介绍Highcharts的基本属性，有需要的可以参考学习。
2016-08-08
使用RequireJS库加载JavaScript模块的实例教程
RequireJS库的主旨就是一个js文件的模块加载器,可以独立于框架来进行使用,这里我们整理了使用RequireJS库加载JavaScript模块的实例教程,需要的朋友可以参考下
2016-06-06
node.js中的socket.io入门实例
这篇文章主要介绍了node.js中的socket.io入门实例,并对websocket等反向ajax技术做了介绍,需要的朋友可以参考下
2014-04-04
Three.js学习之正交投影照相机
本篇主要介绍照相机中的正交投影照相机。学习Three.js的小伙伴们可以参考学习。
2016-08-08
Highcharts学习之数据列
数据列配置是 Highcharts 最复杂也是最灵活的配置，如果说 Highcharts 是灵活多变，细节可定制的话，那么数据列配置就是这个重要特性的核心。
2016-08-08
Three.js学习之Lamber材质和Phong材质
本篇将介绍基本材质以及两种基于光照模型的材质（Lamber与Phong），有需要的小伙伴们可以参考学习。
2016-08-08
JS日程管理插件FullCalendar简单实例
JS日程管理插件FullCalendar是一款基于jQuery的日历日程插件，适用于各种日程安排、工作计划等场景，您可以很方便的查看查看待办事项，标记重要事项以及绑定点击和拖动事件，能快速的整合到您的项目中，本文将简单介绍FullCalendar的使用
2017-02-02
JS日程管理插件FullCalendar中文说明文档
JS日程管理插件FullCalendar提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发，本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档，以供参阅。
2017-02-02
fullCalendar中文API官方文档
FullCalendar是一款基于jQuery的日历插件，适用于各种日程安排、工作计划等场景，本文是fullCalendar官方文档的中文版，主要介绍了fullCalendar的具体属性与方法，大家可以参考一下
2017-02-02