Highcharts学习5 坐标轴(Axes)

除了饼图(pie chart),所有的图表都有x轴和y轴。

先简单了解一下坐标轴有哪些元素:

highcharts-axes

 

轴标签(Axis labels), 刻度线(tickmarks),网格线(gridlines)

轴标签,刻度线和网格线有着紧密的联系,他们会被定位到最适合展示当前图表数据的位置。

 

Ticks

刻度线是沿着坐标轴放置的线条,用来表示计量单位。 刻度之间的间隔主要由tickIntervaltickPixelInterval 参数决定。标签和网格线放置在和刻度线相似的位置。

tickInterval选项决定了坐标轴单位刻度线的间隔,tickInterval默认是null,这意味着线性轴(linear)和时间轴(datetime)的刻度间隔按照tickPixelInterval近似值来计算。

类目轴(categories)tickInterval为null则表示间隔一个category。

注意时间轴(datetime)的间隔是基于毫秒(milliseconds)的,所以一天的时间间隔应表示为24 * 3600 * 1000。

对数轴(logarithmic )tickInterval 按照指数幂来计算。tickInterval 为1时,刻度上的每个值为0.1, 1, 10, 100等。 tickInterval 为2时,在刻度上的每个值为0.1, 10, 1000等。 tickInterval 为0.2时,在刻度上的值为: 0.1, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20, 40等。

tickPixelInterval基于像素值给定一个大致的刻度间隔(如果 "tickInterval" 为null),但不适用于类目轴(categories),默认y轴72,x轴100。

 

Minor ticks

如果设置了minorTickInterval ,次级刻度放置在主刻度之间。次级刻度包括了次级刻度线,次级网格线,他们有自己外观的设置选项,但不包括标签(labels)。

 

Labels

轴标签可以根据选项来展示相应数据的值,标签可以用formatter 函数来自定义格式:

在y轴标签最后加上%号

 

Grid lines

网格线是一组水平或者垂直的线条。网格线将图表分割成一个个小格子,可以更好的展示图表的值。启用和禁用网格线,可以用 gridLineWidth 选项分别设置x轴和y轴:

y轴的网格线默认为启用,宽度为1。x轴网格线默认为禁用,宽度为0。

 

Multiple axes

可以有多个轴连接不同的数据列,创建多个轴如下所示:

注意多个坐标轴是用列表来创建的,所以第一个轴的索引为0。用"opposite: true" 参数可以将轴放到图表的右边。API reference

 

Axis title

坐标轴的标题。默认显示y轴标题,隐藏x轴的标题。xAxis.title

 

Axis types

坐标轴的类型可以是线性轴(linear)、对数轴( logarithmic)、时间轴(datetime)、类目轴(categories)。设置方法如下:

 

Linear

线性轴是坐标轴默认的类型。如果数据列中只有y值,那么x轴的值会从0开始按照tickInterval 递增。

highcharts-linear

 

Logarithmic

在对数轴上坐标轴的值呈对数增长,轴会自动调整以适应当前图表中的数据。

注意在对数轴中,tickInterval 按照指数幂来计算。tickInterval 为1时,刻度上的每个值为0.1, 1, 10, 100等。 tickInterval 为2时,在刻度上的每个值为0.1, 10, 1000等。 tickInterval 为0.2时,在刻度上的值为: 0.1, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20, 40等。

另外需要注意的是,对数轴上不能出现负值,每个轴单位是之前的十分之一。因此,Highcharts 会删除坐标轴上为0或者负数的点,如果设置axis.min 参数为0或者负数,将会出现错误。

 

Datetime

时间轴以适当的间隔打印日期值,和Javascript 日期对象一样,即用一个距1970年1月1日0时0分0秒的毫秒数表示时间,也就是时间戳。一些函数如下:

注意基于Unix服务器的时间戳表示的是秒而不是毫秒。

 

Categories

如果给定了类目,那么类目的名称会替代坐标轴上的数字或日期xAxis.categories

 

What axis type should I use?

许多Highcharts例子中轴配置了categories。然而,重要的是理解什么时候应该使用categories,什么时候最好使用线性和时间轴。

Categories是一组类目的集合。例如 "Apples", "Pears" and "Oranges", or "Red", "Green", "Blue", "Yellow",这些类目有共性,他们之间没有过渡值。"Apples"和"Pears"之间没有滑动的过渡,如果你移除一个类目,用户无法知道哪个类目被移除了。因此,即使类目在坐标轴密集的挤成一团时,Highcharts也不会自动隐藏类目。如果出现了标签重叠的问题,可以使用xAxis.labels.staggerLines (交错显示类目),或者旋转标签。最好不要用xAxis.labels.step来跳过类目,如果你要这么做,还是使用线性或者时间轴吧。

线性或者时间类型的优势是Highcharts能够确定如何处理标签,插入或移除。标签之间大约100像素,可以通过tickPixelInterval 修改。如果你可以预见有一些类别,如"Item1", "Item2", "Item3",或者"2012-01-01", "2012-01-02", "2012-01-03"等等。那么线性或者时间轴结合xAxis.labels.formatter配置可能是一个更好的选择。

 

Dynamically updating axes

动态更新坐标轴的信息API

update (Object options, [Boolean redraw])            Since 3.0

描述:通过新的配置集合更新现有配置。现有配置会和新配置合并,所以只需要指定新添加或者需要更改的配置。

参数:

  • options: Object。新的配置对象
  • redraw: Boolean。是否重绘图表,默认true

 

 

发表评论