axis

除了饼图、地图、环图、单值图,所有图表都有x、y坐标轴。下面是axis元素的简单概述:
axis axis属性节点可以为空,使用通用模板。见axisOptions
特定属性只需要覆盖options设置axis相应的属性值即可。例如沿用options的其他属性,但将其设置为不可见:

{ "axis": [{ "visible": true }] }

id

id用来唯一标识axis。可选择项有:left、top、right、bottom,分别表示左边的坐标轴、上边的坐标轴、右边的坐标轴、下边的坐标轴。

axisType

坐标轴的类型,默认为数值类型。可选项有:"NXAxisTypeNumberic"数值坐标轴、"NXAxisTypeCategory"类别坐标轴、"NXAxisTypeDateTime"时间坐标轴。
如果axisType是NXAxisTypeNumberic或NXAxisTypeDateTime,可以在label中设置按某一格式显示。
如果axisType是NXAxisTypeCategory,可以自定义需要显示的label。见categories

axisLine

水平或垂直的坐标线,使得图表的数据更容易阅读。
相关属性可以为空,使用默认样式。
详情见lineStyle

axisTitle

坐标轴的标题,用来表示此坐标轴的业务含义。相关属性如下:

{ "axisTitle": { "title": "title", "titleVisible": false, "titleLocation": 0.5, "titleOffset": 3, "titleRotation": 0, "titleTextStyle": { ... } } }

axisTitle默认没有、不可见。设置"titleVisible"可以改变axisTitle的显示状态;当"titleVisible"为true时,设置了"title"显示设置的值,否则自动设置为此坐标轴的业务含义。
"titleTextStyle"的属性,见textStyle

point

标识坐标轴上的刻度点,有主刻度和次刻度之分。 主刻度为坐标轴上的测量单位;次刻度在主刻度之间,辅助图表数据的阅读。有三个属性来描述:tick、label、gridLine。下面分别介绍这三种属性:

tick

坐标轴上的刻度线,相关属性如下:

{ "tickVisible": false, "tickLength": 0, "tickDirection": "NXSignNegative", "tickLineStyle": { ... } }

tick默认是不可见的,设置"tickVisible"属性可以改变显示状态。
tickDirection :表示刻度线是在坐标轴线的上面还是下面,上面为"NXSignNegative",下面为"NXSignPositive",默认负方向。
"tickLineStyle"的属性,见lineStyle

label

坐标轴上的标签,用来标识刻度。相关属性如下:

{ "labelVisible": true, "labelNumberUnit": true, "labelFormatter": "#", "labelDirection": "NXSignPositive", "labelOffset": 3, "labelRotation": 0, "labelRotationAnchor": "NXRotationAnchorCenter", "labelAlign": "NXAlignmentCenter", "textStyle": { ... } }

label默认是可见的,设置"labelVisible"属性可以改变显示状态。
"labelNumberUnit"和"labelFormatter"用来将数据格式化。"labelNumberUnit"表示是否使用数字单位,目前支持的有k、m;设置"labelFormatter"属性,即按照指定格式格式化标签。
"labelDirection"的含义同"tickDirection",默认为正方向。
"labelOffset"表示label沿"labelDirection"方向的偏移量。
"labelRotationAnchor"表示label旋转的锚点。默认为"NXRotationAnchorCenter",表示以标签中心为锚点进行旋转。 "labelRotation"表示label需要旋转的角度,使用角度制。

gridLine

刻度分割线,水平和垂直一起时呈格子状,有利于图表的阅读和理解。当图表是垂直时,默认Y轴的主刻度显示gridLine,当图表是水平时,默认X轴的主刻度显示gridLine。相关属性如下:

{ "gridLineVisible": true, "gridLineStyle": { ... } }

设置"gridLineVisible"属性可以改变显示状态。
"gridLineStyle"的属性,见lineStyle

band

将数据突显的区域块,有利于特殊数据的阅读。相关属性如下:

{ "range": { ... }, "fill": { ... }, "borderLineStyle": { ... } }

"range":配置区域块的范围。见range
"fill":区域块的填充色。见fillColor
"borderLineStyle":区域块边界线的样式。见lineStyle
band区域块可以有多个,然而大部分情况只需要修改range改变区域块范围,fill和borderLineStyle都是相同的,为了避免重复操作,niuchart提出了bandOptions概念。

bandOptions

bandOptions其实就是band的一套模板。在bandOptions中配置好band的通用属性,那么在band中只需要将与bandOptions中不同的属性再做个设值即可,避免了相同属性重复定义的麻烦。
下面是bandOptions相关属性介绍:

"bandOptions": { "range": { ... }, "fill": { ... }, "borderLineStyle": { ... } }

如果band沿用bandOptions中的fill和borderLineStyle,那么只需要覆盖设置range:

{ "bands": [{ "range": { "location": 0, "length": 0 } }] }

categories

如果axisType是NXAxisTypeCategory,那么可以自定义分类坐标的label。相关属性如下:

{ "categories": ["语文", "数学", "生物"] }
</div>

divisionPolicy

坐标轴分法策略,该属性只对数值型坐标有效(axisType为NXAxisTypeNumberic时)。选择不同的策略,坐标轴就会在策略位置上显示tick和label,默认时为自动策略。可选项有:"NXAxisLabelingPolicyNone"用户自定义labels和tick的坐标位置、"NXAxisLabelingPolicyLocationsProvided"(暂不支持)、"NXAxisLabelingPolicyFixedInterval"、"NXAxisLabelingPolicyAutomatic"自动排布、"NXAxisLabelingPolicyEqualDivisions"。相关属性如下:

"divisionPolicy": { "strategy": "NXAxisLabelingPolicyAutomatic", "fixedInterval": { ... }, "equalDivision": { ... }, "providedLocations": { ... } }

"strategy":表示此坐标轴使用的划分策略。默认为自动策略,设置其他选项可以改变状态。
"fixedInterval":NXAxisLabelingPolicyFixedInterval策略的相关属性,见NXAxisLabelingPolicyFixedInterval
"equalDivision":NXAxisLabelingPolicyEqualDivisions策略的相关属性,见NXAxisLabelingPolicyEqualDivisions
"providedLocations":NXAxisLabelingPolicyLocationsProvided策略的相关属性,见NXAxisLabelingPolicyLocationsProvided

NXAxisLabelingPolicyLocationsProvided

此策略为用户自定义tick的坐标位置

{ "majorPointLocations": [0, 1], "minorPointLocations": [0.5] }

"majorPointLocations":主刻度的坐标
"minorPointLocations":次刻度的坐标

NXAxisLabelingPolicyFixedInterval

此策略为固定长度(逻辑值)分法

{ "majorIntervalLength": 0, "minorIntervalLength": 0, "fixedOrigin": 0 }

"majorIntervalLength":主刻度间隔的长度
"minorIntervalLength":次刻度间隔的长度
"fixedOrigin":划分起始点

NXAxisLabelingPolicyEqualDivisions

此策略为按个数等分法

{ "majorPointNumber": 2, "minorPointNumber": 1 }

"majorPointNumber":主刻度的个数
"minorPointNumber":次刻度的个数

results matching ""

    No results matching ""