手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Highcharts学习之坐标轴
Highcharts学习之坐标轴
摘要:前言所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart...

前言

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

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

tags:

Highcharts学习之坐标轴1

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学习之坐标轴2

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学习之坐标轴3

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学习之坐标轴4

6.opposite

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

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

Highcharts学习之坐标轴5

7.inverted

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

Highcharts学习之坐标轴6

8.min、max

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

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

总结

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

【Highcharts学习之坐标轴】相关文章:

探索angularjs+requirejs全面实现按需加载的套路

AngularJS的内置过滤器详解

nodejs实现获取某宝商品分类

javascript自定义右键弹出菜单实现方法

JQuery中Text方法用法实例分析

JavaScript判断图片是否已经加载完毕的方法汇总

Javascript技术栈中的四种依赖注入小结

JavaScript中substring()方法的使用

AngularJS学习笔记之ng-options指令

png在IE6 下无法透明的解决方法汇总

精品推荐
分类导航