Highcharts学习之坐标轴


Posted in Javascript onAugust 02, 2016

前言

所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调。

下面一起来学习学习Highcharts的坐标轴。

tags:

Highcharts学习之坐标轴

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  //间隔几个线显示一次
        }

Highcharts学习之坐标轴

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',
}

Highcharts学习之坐标轴

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
      },

Highcharts学习之坐标轴

6.opposite

当其值设置为true时,x轴和y轴显示的位置分别上下,左右对调。

xAxis:{
        categories:['A','B','C'],
        opposite:true
      },
      yAxis:{
        type:'datetime',
        opposite:true
      }

Highcharts学习之坐标轴

7.inverted

chart:{
        type:'line',
        style:{
          fontSize:"17px",
        },
        inverted:true
      }

Highcharts学习之坐标轴

8.min、max

控制数轴的最小值和最大值。

注意:控制allowDecimals、min、max 属性你可以轻松控制数轴的显示范围等(这也是很常见的问题)

总结

以上就是本文的全部内容了,大家学会了吗?小编还会继续更新Highcharts的文章,对Highcharts感兴趣的朋友们要继续关注三水点靠木,希望本文给大家学习带来的帮助。

Javascript 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
js调用刷新界面的几种方式
May 03 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
什么是SOLID
Mar 24 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 #Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 #Javascript
Highcharts入门之基本属性
Aug 02 #Javascript
js检查是否关闭浏览器的方法
Aug 02 #Javascript
Highcharts入门之简介
Aug 02 #Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 #Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 #Javascript
You might like
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
puppeteer库入门初探
2019/01/09 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Python素数检测的方法
2015/05/11 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
使用requests库制作Python爬虫
2018/03/25 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Python实现图片识别加翻译功能
2019/12/26 Python
基于opencv实现简单画板功能
2020/08/02 Python
应用心理学个人的求职信
2013/12/08 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
北京奥运会口号
2014/06/21 职场文书
群众路线个人整改措施
2014/10/24 职场文书
2014年文秘工作总结
2014/11/25 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python