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 相关文章推荐
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
js日期相关函数总结分享
Oct 15 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
angularJS 中input示例分享
Feb 09 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 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文件大小格式化函数合集
2014/03/10 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
繁简字转换功能
2006/07/19 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python实现针对中文排序的方法
2017/05/09 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Python实现代码统计工具
2019/09/19 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
捷科时代的软件测试笔试题
2015/11/09 面试题
庆六一活动总结
2014/08/29 职场文书
村委会贫困证明范文
2014/09/21 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
会议简讯范文
2015/07/20 职场文书
勤俭节约主题班会
2015/08/13 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
MySql分区类型及创建分区的方法
2022/04/13 MySQL
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL
table不让td文字溢出操作方法
2022/12/24 HTML / CSS