Highcharts(三)坐标轴


title: Highcharts(三)之坐标轴
date: 2016-07-23 17:53:28
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 属性你可以轻松控制数轴的显示范围等(这也是很常见的问题)

推荐阅读更多精彩内容

  • 坐标轴 下边的选项涉及xAxis或者yAxis,但有的层层嵌套 坐标轴组成 axis Title axis Lab...
    我_巨可爱阅读 191评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,363评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,234评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 129,435评论 18 137
  • 一如既往,上午听VOA医疗app的段子并试着听写下来,虽然磕磕绊绊但多听几遍终是可以听准确的,这是很增长信心的。下...
    就是有点倔阅读 122评论 0 0
  • 梦,只是短暂的停留 心,却是多余的忧愁 怀抱,只是一时的温柔 回忆,却是永久的落寞 曾经的约定 美好的回忆 已化为...
    麦荼阅读 147评论 0 0
  • 浮生若梦杨柳依,独坐林中日头西,但使依人梦中诺,苍生父老有归期、
    幽寻阅读 138评论 0 0
  • 1. 有很长一段时间,当别人问我是不是佛教徒,我都感到很难回答。“可能算是吧”或者”我只是对佛教比较感兴趣”,我总...
    禾十三阅读 476评论 0 3