七、基础教程-坐标轴(Axis)
来源:互联网 发布:网络电话拨号软件 编辑:程序博客网 时间:2024/05/19 02:45
零、坐标轴(Axis)
笛卡尔图表(普通的二维数据图)都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调。下图为图表中坐标轴组成部分![图表坐标轴组成部分](https://img.hcharts.cn/static/highcharts/images/docs/basic_axis1.jpg)
一、坐标轴组成部分
1. 坐标轴标题
坐标轴标题。默认情况下,x轴为null(也就是没有title),y轴为'Value',设置坐标轴标题的代码如下:
xAxis:{ title:{ text:'x轴标题' }}yAxis:{ title:{ text:'y轴标题' }}
2. 坐标轴刻度标签
坐标轴标签(分类)。Labels常用属性有**enabled**、**formatter**、**step**、**staggerLines**1) enabled 是否启用Labels。x,y轴默认值都是true,如果想禁用(或不显示)Labels,设置该属性为false即可。2) Formatter 标签格式化函数。默认实现是:
formatter:function(){ return this.value;}
this.value代码坐标轴上当前点的值(也就是x轴当前点的x值,y轴上当前点的y值),除了value变量外,还有axis、chart、isFirst、isLast可用。例如调用this.isFirst的结果如下图所示
另外一个例子,实现更高级的自定义格式化函数,截图如下:
yAxis: { labels: { formatter:function(){ if(this.value <=100) { return "第一等级("+this.value+")"; }else if(this.value >100 && this.value <=200) { return "第二等级("+this.value+")"; }else { return "第三等级("+this.value+")"; } } }}
3) Step Labels显示间隔,数据类型为number(或int)。下图说明了step的用法和作用4) staggerLines 水平轴 Labels 显示行数。(该属性只对水平轴有效)当 Lables 内容过多时,可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。
3. 坐标轴刻度
Tick为坐标轴刻度。默认情况下x轴刻度高(tickLength属性)为5px,宽为1px; y轴宽为0px(也就是不显示刻度)。Tick相关的属性主要有tickLength、tickWidth、tickColor、tickInterval、tickmarkPlacement。1) tickLength、tickWidth、tickColor 分别代表刻度线的长度、宽度、颜色。2) tickInterval 刻度间隔。其作用和Lables.step类似,就是不显示过多的x轴标签内容,不同的是,tickInterval是真正意义上的调整刻度,而Lables.step只是调整Labels显示间隔。所以在实际应用中,tickInterval用的多。 针对不同数据类型的坐标轴有不同的默认值。对于线性数据和Datetime类型数据,其默认值是tickPixelInterval值,对于Categorty表示间隔一个category。3) tickmarkPlacement 刻度线对齐方式,有between和on可选,默认是between。设置为on后的变化如下图:
4. 坐标轴网格线
坐标轴网格线。默认情况下,x轴网格线宽度为0,y轴网格线宽度为1px。 网格线共有三个属性可设置,分别是: gridLineWidth、gridLineColor、gridLineDashStyle1) gridLineWidth 网格线宽度。x轴默认为0,y轴默认为1px。2) gridLineColor 网格线颜色。默认为:#C0C0C03) gridLineDashStyle 网格线线条样式。和Css border-style类似,常用的有:Solid、Dot、Dash。
5. 多轴
多个轴。在Highcharts中, 坐标可以是多个,最常见的是多个y轴。多轴存在时,Axis是一个数组,而在赋值时,通过Axis数组的下标与数据关联。如下图所示:
yAxis:[ {}, {}]series:[ { type:'line', yAxis:0 },{ type:'spline', yAxis:1 }]1. 数据列中通过坐标轴下标来与坐标轴关联(下标从0开始)2. opposite:true 表示坐标轴显示位置反转(左右或上下反转)3. 在数据列数组中,可以通过type来指定类型,这样就形成混合图
* Series中设置每个轴值时,用轴数组下标关联(注意下标是从 0 开始的)* 设置opposite: true表示该轴位置反转,即为y轴时显示在右侧,为x轴时显示在顶部(和正常情况下x轴在下,y轴左构成反转)。* 在Series中可以设置该轴的类型,多个轴不同的类型(例如:type:'spline'),就构成了多种图表并存的混合图。
二、坐标轴类型
坐标轴中,可以通过Type指定坐标轴类型,有linear、logarithmic、datetime、category可选,默认是:linear。指定类型的实例代码如下:
yAxis: { type: 'linear',}xAxis: { categories: ['Apples', 'Bananas', 'Oranges']}
1. 线性轴
线性轴。默认类型,x轴按照 Axis.tickInterval 值增长,y轴默认是自适应。
2.对数轴
对数轴。按照数学中的对数增长,例如1,2,4,8… 用的不多,主要用于对数图表
3. 时间轴
时间轴。时间使用和Javascript 日期对象一样,即用一个距1970年1月1日0时0分0秒的毫秒数表示时间,也就是时间戳Highcharts有很多时间格式化函数1) Date.getTime() 获取当前时间戳。实例用法如下
time = Date.getTime(); //time = 1384442746960 (ms) 当前时间为 2013-11-14 23:25:46
2) Date.UTC(year,month,day,hours,minutes,seconds,millisec)通过UTC方式获取指定时间的毫秒数,例如获取 2013-11-14 00:00:00的毫秒数代码如下:
time = Date.UTC(2013,11,14,0,0,0,0); // time = 1386979200000 (ms);
3) Highcharts.dateFormat(String format)
4. category
数组轴。用的最多也最简单
三、动态更新及其他相关属性
1.动态更新
坐标轴可以通过函数实现动态更新,在图表绘制完毕后,你可以任意的对你更改而不需要重绘。所有相关函数都在 Axis 中,本教程将在《函数使用》章节具体讲解。
2. 其他相关属性
除了Axis中的属性可以对坐标轴有影响外,还有其他属性也可以对其起作用。列举如下:1) inverted 图表反转,即 Chart.inverted,当其值设置为true时,x轴和y轴显示的位置对调。2) reversed 轴反转。和 inverted 不同的是,轴反转是将坐标轴刻度反转而不是 x、y轴对调。例如 y 轴反转的结果是 y 轴是从最大的值开始的,最小值反而在最下方。3)opposite 轴倒置。主要控制坐标轴左右或上下显示。4)allowDecimals 控制数轴是否显示小数。5) min、max 控制数轴的最小值和最大值。注意:控制allowDecimals、min、max 属性你可以轻松控制数轴的显示范围等(这也是很常见的问题)6) plotLines 标示线7) plotBands 标示区域
阅读全文
0 0
- 七、基础教程-坐标轴(Axis)
- HightChart的坐标轴(Axis)
- Highcharts的坐标轴(Axis)
- HTML 基础教程(七)
- WAP基础教程(WML学习(七))
- 网页制作基础教程(七)--DIV盒子
- Python基础教程(七):函数、模块
- PHP基础教程(七)引用传参
- matplotlib命令与格式:axis坐标轴对象命令合集
- CorePlot学习七---坐标轴的详细分析
- CorePlot学习七---坐标轴的详细分析
- Objective-C基础教程七
- OGRE 引擎官方基础教程 (七) OGRE 和 CEGUI
- [Matlab]基础教程学习笔记(七):符号运算
- [Matlab]基础教程学习笔记(七):符号运算
- Scala基础教程(七):类和对象、特征
- XPath Axes(坐标轴)
- XPath Axes(坐标轴)
- oracle实用知识(五)
- http://dl-ssl.google.com/android上不去解决方案
- LCS+路径还原
- bzoj 5241. 【GDOI2018模拟8.8】苹果和雪梨 贪心
- 安卓实训笔记第二天
- 七、基础教程-坐标轴(Axis)
- Js中JSON对象
- quartus || 怎样调用PLL 核
- 8月8日训练笔记
- 【MVC】传值大全参考
- Configuration--mappers(三-8)
- DBUtils学习之——使用ResultSetHandler接口的各个实现类实现数据库的增删改查
- TextView、EditText字体大小调节
- [编程题] 二维数组打印