Highcharts学习之坐标轴
2016-08-02 17:32
417 查看
前言
所有的图表除了饼图都有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 }, 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 属性你可以轻松控制数轴的显示范围等(这也是很常见的问题)
总结
以上就是本文的全部内容了,大家学会了吗?小编还会继续更新Highcharts的文章,对Highcharts感兴趣的朋友们要继续关注脚本之家,希望本文给大家学习带来的帮助。
您可能感兴趣的文章:
相关文章推荐
- 孙鑫VC学习笔记:第十一讲 (一) 坐标空间与各种转换的概念
- D3D坐标系统和几何-DirectX Griaphic学习〔转载〕
- GDAL库学习笔记-坐标转化
- 《OpenGL游戏程序设计》学习笔记---第五章坐标变换和OpenGL矩阵
- OpenGl学习笔记3——屏幕坐标(2维)转化为世界坐标(3维)
- 《OpenGL游戏程序设计》学习笔记---第五章坐标变换和OpenGL矩阵
- AO 中关于坐标系统的感想 -AO学习资料 阅读
- Qt学习笔记八 二维图形(2) 坐标系统变换
- As3 3D学习之屏幕与3D坐标
- 孙鑫VC学习笔记:第十一讲 坐标空间与各种转换的概念
- Flash/Flex学习笔记(42):坐标旋转
- 井位坐标添加到Las文件功能——Tkinter界面开发学习笔记一
- Jim's游戏外挂学习笔记3——继续找当前地图数据和所处坐标存放的地址
- MapXtreme 2005 学习心得 关于地图投影坐标问题的解决方式(十四)
- [外挂学习]Jim's游戏外挂学习笔记3——继续找当前地图数据和所处坐标存放的地址
- Jim's游戏外挂学习笔记3——继续找当前地图数据和所处坐标存放的地址
- pv3d学习(二)坐标
- Google Maps API V3学习一(获取地图坐标与街道地址)
- flex学习-----获取鼠标坐标
- Amazed游戏学习二 坐标的分析