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的更多相关文章

  1. 【HighCharts系列教程】六、去除highCharts版权信息的几种方法

    方法一:单个图表去除版权 设置Credits属性为不可用,也就是credits中enable=false,具体代码如下 <script type="text/javascript&qu ...

  2. 【HighCharts系列教程】十、图例属性——legend

    一.legend属性说明 Legend是HighCharts图表的图例属性,如图 默认情况下,HighCharts都会有图例,无特殊情况,默认即可满足需求,所以一般不用配置Legend属性. 二.la ...

  3. 【HighCharts系列教程】九、语言属性——Lang

    一.lang属性说明 Lang属性主要用于配置显示的文字等语言相关属性. 主要可配置如下内容:小数点符号.导出相关文字.月份文字.星期文字等 lang属性不重要,无特殊情况,不用配置. 二.lang属 ...

  4. 【HighCharts系列教程】八、Html标签属性——Labels

    一.labels属性说明 Labels属性允许在HighCharts图表的任意位置添加任意的html代码.可以实现许多自定义内容. 二.labels属性详解 参数 子参数 说明 默认值 items — ...

  5. 【HighCharts系列教程】七、导出属性——exporting

    一.exporting属性说明 默认情况下,HighCharts支持将图表导出为图片或打印功能的.也就是在图表的右上角有两个按钮.打击即可进行相应的操作. 实现导出和打印功能需要引入相应的js文件,也 ...

  6. 【HighCharts系列教程】五、版权属性——Credits

    一.Credits属性说明 严格来讲,Credits并不算版权信息,官方的说法是:Highchart by default putsa credits label in the lower right ...

  7. 【HighCharts系列教程】四、颜色属性——colors

    一.Colors属性说明 配置Colors,可以自定义数据列的颜色. 默认下colors就包含一系列颜色,在个性化或需要调整颜色的顺序下,我们可以配置该属性. 二.colors属性详解 Colors属 ...

  8. 【HighCharts系列教程】三、图表属性——chart

    一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置cha ...

  9. 【HighCharts系列教程】二、Highcharts结构及API文档

    一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript& ...

随机推荐

  1. C# DIctionary:集合已修改,可能无法执行枚举操作

    C#中直接对集合Dictionary进行遍历并修改其中的值,会报错,如下代码就会报错:集合已修改;可能无法执行枚举操作.代码如下 public void ForeachDic() { Dictiona ...

  2. <跟股市谚语学炒股> 读书笔记

    书在这里 一般情况下,当成交清单上显示的买盘金额大.笔数少,卖盘金额小.笔数多时,系主力在建仓.散户在卖出:相反,若买盘金额小.笔数多,卖盘金额大.笔数少时,系主力在出货.散户在买入 一般来说,当大盘 ...

  3. PostgreSQL LIKE 查询效率提升实验<转>

    一.未做索引的查询效率 作为对比,先对未索引的查询做测试 EXPLAIN ANALYZE select * from gallery_map where author = '曹志耘'; QUERY P ...

  4. git——添加远程库

    添加远程库 阅读: 406682 现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以 ...

  5. DFS-深度优先遍历

    #include <iostream> /* 5 4 0 0 1 0 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 1 0 0 4 1 Total: 9 7 5 Min: 5 ...

  6. ViewPager一屏显示多个item,及边缘滑动事件优化

    关于ViewPager显示两边的item方法,网络上是方法都在ViewPager外包一个Layout, 然后设置ViewPager和外面的Layout的clipChildren="false ...

  7. 自己用过的一些比较有用的css3新属性

    css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开始慢慢的去了解并使用css3(还有html5),因为我觉得这是一种趋势,它是一种已经被制定的标准.我并不 ...

  8. [spark] spark安装和基础使用

    [下载] 注意选择spark版本时,与hadoop的版本要搭配 http://spark.apache.org/downloads.html [安装]

  9. win10 + linux 制作双系统教程(我本身是win10系统)

    1.制作启动U盘 准备工作: .linux镜像 .硬盘空余空间>8G,越大越好 .制作启动U盘的软件 .最好3.0U盘一个>4G 下载启动软件的工具(UItraIOS制作的U盘启动盘无法安 ...

  10. Unity下Iso和Persp两种模式的区别

    Iso模式 平行视野.在Iso模式下,不论物体距离摄像头远近都给人的感觉是一样大的. Persp模式 透视视野.在persp模式下,物体在scene界面上所呈现的画面是给人一种距离摄像头近的物体显示的 ...