Highcharts学习之坐标轴

网友投稿 286 2023-07-10


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

},

http:// 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",http://

},

inverted:true

}

8.min、max

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

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

总结

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:window.open打开窗口被拦截的快速解决方法
下一篇:使用伪命名空间封装保护独自创建的对象方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~