highcharts系列之xAxis
xAxis定义的是x坐标轴的配置选项。默认情况下,x轴指的是水平轴,特殊指定的时候也可以作为垂直的轴使用,在多坐标系中,xAxis是有多个配置好了的轴object的数组。
下面来看一下,xAxis常用的属性都有哪些:
|
属性 |
数据类型 |
默认值 |
说明 |
|
type |
String |
datetime |
可选,值为linear,logarithmic或者datetime;如果为datetime,则数值是百万分之一秒,标尺会自动放在适当位置,如整小时,或者day的位置。 |
|
tickInterval |
mixed |
null |
设置横标标尺的间隔长度, 1*24*3600*1000为一天 |
|
tickLength |
num |
5 |
每个间隔长度默认的像素值 |
|
labels |
object |
align:center; x:0; y:0; Enabled:true; Formatter:function(){ Return this.value;} Overflow: null; Reotation: 0; sraggerLines: null; Step: null; Style: {color:’#6D869F’, Font-weight: ‘bold’}; useHTML: false; |
Align:可选,left,right,center left表示刻度线在刻度名称的左边; X:刻度偏离刻度线x轴的像素,正数为向右偏移,负数为向左偏移; Y:刻度偏离刻度线y轴的像素,正数为向下偏移,负数为向上偏移。 Enabled:启用和禁用标签; Formatter:回调javascript函数格式化标签,值通过this.value得到,this的附加属性,axis,chart,isFirst overFlow:处理水平轴的一出标签。可以是undefined和justify,如果是justify,标签将不会在绘图区外渲染,如果有足够的空间去移动它,它将会在边缘对齐,否则会被移除。 Rotation:标签旋转的角度。 Step:每隔n个的标签显示在轴上,设置step为n,每隔n-1个显示标签。 Style: 标签的css样式。 useHTML:是否使用HTML渲染标签。 |
|
allowDecimals |
Boolean |
true |
轴上的刻度是否允许使用小数 |
|
alternateGridColor |
null |
使用备用的网格颜色时,表格会隔行变色 |
|
|
categories |
[] |
x轴的名称。比如 categories: ['Apples', 'Bananas', 'Oranges'] |
|
|
dateTimeLabelFormats |
{second:'%H:%M:%S', minute:'%H:%M', hour:'%H:%M', day:'%e. %b', week:'%e. %b', month:'%b \'%y', year:'%Y'} |
时间轴,标尺会根据合适的单位自动计算. |
|
|
endOnTick |
Boolean |
false |
是否强制轴以一个刻度结束。使用该项和maxpadding项来控制轴的末端 |
|
gridLineColor |
#C0C0C0 |
绘图区网格线的颜色 |
|
|
id |
null |
轴的id,可以在图表渲染后,通过chart。get()来获得一个点 |
|
|
lineColor |
#C0D0E0 |
轴本身的线的颜色 |
|
|
lineWidth |
1.0 |
轴本身的线的宽度 |
|
|
linkedTo |
null |
指向本轴的另一个轴的索引,当一个轴指向主轴时,它将有和主轴一样的极端值,但是通过min,max或者setExtremes可以进行更改。它也可以用来显示附加信息,或者通过复制标尺来缓解图表显示 |
|
|
max |
null |
轴的最大值,如果是null,最大值会被自动计算。如果endOnTick设置为true,则最大值会被四舍五入。实际上的最大值也会被chart.alignTicks影响。 |
|
|
maxpadding |
0.01 |
最大值相对于轴的长度的填充间距。padding为0.05时,会取100px长得轴的5px长度。 |
|
|
min |
null |
轴的最小值,如果是null,会自动计算 |
|
|
minpadding |
0.01 |
最小值相对于轴的长度的填充间距。 |
|
|
minrange |
null |
轴显示的最小范围,整个轴将不被允许跨越这个最小间隔。比如一个时间轴,最小单位是毫秒 |
|
|
minTickInterval |
null |
轴值允许的最小刻度间隔,比如缩放轴用来显示每天的数据,可以用来阻止轴上显示的时间。 |
|
|
offset |
0.0 |
绘图区到轴线的像素间距,正的偏移量会让轴的线,便签,和刻度远离绘图区 |
|
|
opposite |
false |
是否显示在正常显示的对面一侧显示轴。正常显示的是垂直的左边,水平的下面,因此对面就是垂直的右边,和水平的上边。 |
|
|
plotBands |
参考plotBands |
||
|
plotLines |
参考plotLines |
||
|
reversed |
false |
是否逆转轴,以使得最高的点最接近起点。 |
|
|
showEmpty |
null |
是否显示轴线和标题,当轴不包含数据时。 |
|
|
showFirstLabel |
Boolean |
true |
是否显示第一个刻度标签 |
|
showLastLabel |
Boolean |
false |
是否显示最后一个刻度标签 |
|
startofWeek |
1.0 |
对于时间轴,决定轴之间的刻度。 0=周日,1=周一。 |
|
|
startOnTick |
false |
是否强制轴以刻度开始。结合maxPadding选项使用控制轴的开始。 |
|
|
tickColor |
#C0D0E0 |
主刻度的颜色 |
|
|
tickInterval |
null |
主刻度的间隔,以轴单位为单位。当为null时,线性轴的刻度间隔约等于tickPixelInterval,时间轴的约为时间间隔。 |
|
|
tickLength |
5.0 |
主刻度的长度 |
|
|
tickPixelInterval |
X:72 Y:100 |
当tickInterval是null的时候,该选项设置了刻度标志的大约间隔的像素值。 |
|
|
tickPosition |
outside |
可以是inside或者outside。刻度标记相对于轴线的位置。 |
|
|
tickPositioner |
null |
回调函数,返回一个定义刻度在轴上的排列的数组 |
|
|
tickPositions |
null |
定义轴刻度的数组 |
|
|
tickWidth |
1.0 |
主刻度的像素宽度 |
|
|
tickmarkPlacement |
between |
仅用在分类轴上。如果是on,刻度标记在分类的正中间,如果是between,刻度在两个分类的之间。 |
|
|
afterSetExtremes |
fn |
null |
Event x轴事件,相对于setExtremes事件的事件。在最后的最小值和最大值都被计算且校正过minRange后触发该事件 |
|
setExtremes |
null |
当轴的最大值和最小值设置的时候,被触发,无论是调用.setExtremes()方法或者是选择了图表的一个区域。this关键字是指轴对象自己。唯一的参数event被传递到函数中。用户设置的新的最大值和最小值可以通过event.min和event.max查找。 |
highcharts系列之xAxis的更多相关文章
- 【HighCharts系列教程】六、去除highCharts版权信息的几种方法
方法一:单个图表去除版权 设置Credits属性为不可用,也就是credits中enable=false,具体代码如下 <script type="text/javascript&qu ...
- 【HighCharts系列教程】十、图例属性——legend
一.legend属性说明 Legend是HighCharts图表的图例属性,如图 默认情况下,HighCharts都会有图例,无特殊情况,默认即可满足需求,所以一般不用配置Legend属性. 二.la ...
- 【HighCharts系列教程】九、语言属性——Lang
一.lang属性说明 Lang属性主要用于配置显示的文字等语言相关属性. 主要可配置如下内容:小数点符号.导出相关文字.月份文字.星期文字等 lang属性不重要,无特殊情况,不用配置. 二.lang属 ...
- 【HighCharts系列教程】八、Html标签属性——Labels
一.labels属性说明 Labels属性允许在HighCharts图表的任意位置添加任意的html代码.可以实现许多自定义内容. 二.labels属性详解 参数 子参数 说明 默认值 items — ...
- 【HighCharts系列教程】七、导出属性——exporting
一.exporting属性说明 默认情况下,HighCharts支持将图表导出为图片或打印功能的.也就是在图表的右上角有两个按钮.打击即可进行相应的操作. 实现导出和打印功能需要引入相应的js文件,也 ...
- 【HighCharts系列教程】五、版权属性——Credits
一.Credits属性说明 严格来讲,Credits并不算版权信息,官方的说法是:Highchart by default putsa credits label in the lower right ...
- 【HighCharts系列教程】四、颜色属性——colors
一.Colors属性说明 配置Colors,可以自定义数据列的颜色. 默认下colors就包含一系列颜色,在个性化或需要调整颜色的顺序下,我们可以配置该属性. 二.colors属性详解 Colors属 ...
- 【HighCharts系列教程】三、图表属性——chart
一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置cha ...
- 【HighCharts系列教程】二、Highcharts结构及API文档
一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript& ...
随机推荐
- (转) Hadoop1.2.1安装
环境:ubuntu13 使用的用户为普通用户.如:用户ru jdk安装略 1.安装ssh (1) sudo apt-get install openssh-server (2)配置ssh面密码登录 $ ...
- mongo源码学习(二)db.cpp之mongoDbMain方法分析
mongo后台进程的入口:mongo/src/mongo/db/dbmain.cpp,wmain(for windows)和main函数,main函数也很简单,就是委托给db.cpp中的mongoDb ...
- C语言 · 分苹果
算法提高 分苹果 时间限制:1.0s 内存限制:256.0MB 问题描述 小朋友排成一排,老师给他们分苹果. 小朋友从左到右标号1..N.有M个老师,每次第i个老师会给第Li个到第R ...
- u-boot2011.09 u-boot.img 的流程跟踪
一.主要是start.S 里面的 board_init_f 以及 board_init_r 函数分析,MLO与 u-boot.omg 的区别就在这里 二. MLO 加载完毕,他会重新回到 start. ...
- linq操作符:转换操作符
这些转换操作符将集合转换成数组:IEnumerable.IList.IDictionary等.转换操作符是用来实现将输入对象的类型转变为序列的功能.名称以"As"开头的转换方法可更 ...
- SpringBoot 中常用注解@Controller/@RestController/@RequestMapping的区别
SpringBoot中常用注解@Controller/@RestController/@RequestMapping的区别 @Controller 处理http请求 @Controller //@Re ...
- Oracle 语句中“||”代表什么啊?
Oracle 语句中“||”代表什么啊? Oracle 语句中“||”代表什么啊?跟ServerSQL中的字符串的连接符“+”是一个概念么? 1. 恩是的 是一个含义...select '1'||'2 ...
- BFS-广度优先遍历
#include <iostream> #include <queue> using namespace std; /* 5 4 0 0 1 0 0 0 0 0 0 0 1 0 ...
- 微信小程序——星星评分
先来个效果图镇楼: 实现原理: 1.循环需要评分的列表,判断它的分数 与 当前星星索引的大小: 2.点击,获取星星对应的分数,让星星高亮. 代码: star.wxml: <view class= ...
- 引入css少引入了rel="stylesheet" 这行代码。导致整个页面空白、
忘记引入rel="stylesheet" 如下: <link href="css/swiper-3.3.1.min.css" /> 这样使得整个页 ...