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

相关文章

  • require.js深入了解 require.js特性介绍

    require.js深入了解 require.js特性介绍

    这篇文章主要介绍了require.js深入了解,require.js特性介绍,本文讲解了require.js和CommonJS的兼容、CDN回退、循环依赖、BaseUrl、JSONP等内容,需要的朋友可以参考下
    2014-09-09
  • Highcharts入门之基本属性

    Highcharts入门之基本属性

    Highcharts是一个用纯JavaScript编写的一个图表库,之前小编发了一篇介绍Highcharts的文章,那么本文将进一步的介绍Highcharts的基本属性,有需要的可以参考学习。
    2016-08-08
  • 使用RequireJS库加载JavaScript模块的实例教程

    使用RequireJS库加载JavaScript模块的实例教程

    RequireJS库的主旨就是一个js文件的模块加载器,可以独立于框架来进行使用,这里我们整理了使用RequireJS库加载JavaScript模块的实例教程,需要的朋友可以参考下
    2016-06-06
  • node.js中的socket.io入门实例

    node.js中的socket.io入门实例

    这篇文章主要介绍了node.js中的socket.io入门实例,并对websocket等反向ajax技术做了介绍,需要的朋友可以参考下
    2014-04-04
  • Three.js学习之正交投影照相机

    Three.js学习之正交投影照相机

    本篇主要介绍照相机中的正交投影照相机。学习Three.js的小伙伴们可以参考学习。
    2016-08-08
  • Highcharts学习之数据列

    Highcharts学习之数据列

    数据列配置是 Highcharts 最复杂也是最灵活的配置,如果说 Highcharts 是灵活多变,细节可定制的话,那么数据列配置就是这个重要特性的核心。
    2016-08-08
  • Three.js学习之Lamber材质和Phong材质

    Three.js学习之Lamber材质和Phong材质

    本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong),有需要的小伙伴们可以参考学习。
    2016-08-08
  • JS日程管理插件FullCalendar简单实例

    JS日程管理插件FullCalendar简单实例

    JS日程管理插件FullCalendar是一款基于jQuery的日历日程插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用
    2017-02-02
  • JS日程管理插件FullCalendar中文说明文档

    JS日程管理插件FullCalendar中文说明文档

    JS日程管理插件FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档,以供参阅。
    2017-02-02
  • fullCalendar中文API官方文档

    fullCalendar中文API官方文档

    FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,本文是fullCalendar官方文档的中文版,主要介绍了fullCalendar的具体属性与方法,大家可以参考一下
    2017-02-02

最新评论