series

图表上一系列的数据,例如一个条形图或者一个柱形图。所有绘制在图表上的数据都来自series。下面是NXLineSeries的简单概述:

相关属性如下:

{ "series": [{ "type": "NXLineSeries" ... }] }

type

表示sereis的类型。series的类型有:"NXScatterSeries"、"NXLineSeries"、"NXAreaSeries"、"NXBarSeries"、"NXBubbleSeries"、"NXStepLineSeries"、"NXMapSeries"、"NXPieSeries"、"NXRingSeries"、"NXSingleSeries","NXRadarSeries"。
给series设置以上不同的类型,就可以得到不同类型的图表。
series的其他属性节点可以不用设置。series针对不同的类型都有一套模板,使得不用重复配置相同属性节点。series想要配置特殊的属性值,只需要覆盖模板的相应属性。模板见seriesOptions

NXSeriesStyle

所有类型series模板的基类。相关属性如下:

{ "id": "", "name": "", "isSeriesPureColor": true, "fill": { "fillAlpha": 0, "fillColor": "#000000" }, "minZoomRange": 80, "sort": { "sortSource": "Y", "sortType": "NXSortOperationNone" }, "displayInFrontEvenUnActive": false, "iteration": { "isMultiLevel": false, "stackGroupMap": {}, "isLeafLevel": false, "measureToGraphicGran": [ {} ] }, "dataSource": { "xValueSource": "", "yValueSource": "", "yValueSourceQueue": [], "y2ValueSource": "", "y2ValueSourceQueue": [], "fillColorValueSource": "", "xFormatNumberUnit": false, "yFormatNumberUnit": false, "y2FormatNumberUnit": false, "xFormatString": ",###", "yFormatString": ",###", "y2FormatString": ",###", "xDisplayDateFormatString": "", "xDataSourceDateFormatString": "", "xDisplayDateLocale": "", "xDataSourceDateLocale": "", "valueFormats": [ { "formatString": ",###", "formatNumberUnit": false, "valueSource": "" } ], "colorRange": { "valueSource": "", "linearRange": [ { "value": 0, "color": { "fillAlpha": 0, "fillColor": "#000000" } } ], "sectionRange": [ { "fromValue": 0, "toValue": 60, "color": { "fillAlpha": 0, "fillColor": "#000000" }, "legend": "不及格" } ], "dataRange": { "fromValue": 0, "toValue": 100 } } } }

"id":series的唯一标识。
"name":series的名字,可以是中文。
"isSeriesPureColor":表示series的每个数据点是否使用一样的颜色。一般情况下同个series的不同数据点都会使用相同的颜色,但是像饼图每个数据点(即每个扇叶)的颜色就会不一样。
"fill":该series的填充色。相关属性见fillColor
"minZoomRange":当图表有导航条的时候,可以手势拖动对图表进行缩放,该属性表示series能进行缩放的最小范围。
"displayInFrontEvenUnActive":表示是否设置无论在激活或未激活状态,该series一直显示在前面。

sort

将series按配置的属性值进行排序。

{ "sort": { "sortSource": "Y", "sortType": "NXSortOperationNone" } }

"sortSource":series中要进行排序的数据源。可选项有:X,Y,Y2。
"sortType":排序的类型。可选项有:NXSortOperationNone(不排序),NXSortOperationAsc(增序),NXSortOperationDesc(降序)

iteration

系列迭代器,用它在某个粒度上产生多个series。分为两种情况:一.单/多系列;二.单值系列。相关属性如下:

{ "iteration": { "isMultiLevel": false, "stackGroupMap": { }, "isLeafLevel": false, "measureToGraphicGran": [{ }] } }

单/多系列

以下两个属性用于设置图表是多系列图还是单系列图。默认是单系列图。 "isMultiLevel":表示是否是多系列。如果该属性设置为true,那么就表示是多系列,图表中会有多个系列叠加显示的效果;如果该属性设置为false,那么就是单系列。
"stackGroupMap":seriesName列表和stackGroupKey的映射。具有相同stackGroupKey的series属于同一个stackGroup。同一个stackGroup的series可以重叠或累加显示,具体效果要看stackedType设置的属性值。关于stackedType属性,下文有介绍。

单值系列

"isLeafLevel":表示是否是叶子节点。用于单值图和环图,图表只需要一个数据点。如果该属性设置为true即叶子节点,那么iteration下有关单/多系列的属性都失效。
"measureToGraphicGran":当"isLeafLevel"设置为true时,配置的度量变成图形粒度显示在图里。

dataSource

series的数据来源,包含了series的数据源和数据格式等属性。相关的属性如下:

{ "dataSource": { "xValueSource": "", "yValueSource": "", "yValueSourceQueue": [], "y2ValueSource": "", "y2ValueSourceQueue": [], "xDisplayDateFormatString": "", "xDataSourceDateFormatString": "", "xDisplayDateLocale": "", "xDataSourceDateLocale": "", "valueFormats": [{ "formatString": ",###", "formatNumberUnit": false, "valueSource": "" }], "colorRange": { "valueSource": "", "linearRange": [{ "value": 0, "color": { "fillAlpha": 0, "fillColor": "#000000" } }], "sectionRange": [{ "fromValue": 0, "toValue": 60, "color": { "fillAlpha": 0, "fillColor": "#000000" }, "legend": "不及格" }], "dataRange": { "fromValue": 0, "toValue": 100 } } } }

数据源

设置的数据源key也就是度量key,来自该card的structure中的measures。

  • "xValueSource":标识x轴的数据源key。
  • "yValueSource":标识y轴的数据源key。
  • "yValueSourceQueue":标识y轴的数据源key列表,用来切换小卡片的y1度量。
  • "y2ValueSource":标识半径的数据源key,用于泡泡图。
  • "y2ValueSourceQueue":标识半径的数据源key列表,用来切换小卡片的y2度量。

    格式化

  • "xDisplayDateFormatString":最终显示出来的日期格式化。
  • "xDataSourceDateFormatString":数据源的日期格式化。即数据库里存的日期格式。
  • "xDisplayDateLocale":最终显示出来的日期语言。中文:zh,英文:en
  • "xDataSourceDateLocale":数据源的日期语言。中文:zh,英文:en

    valueFormats

    针对数据源key的储备格式。想将某个数据源按某个格式显示,只需要配置该数据源的valueFormat。
{ "valueFormats": [{ "formatString": ",###", "formatNumberUnit": false, "valueSource": "" }] }
  • "formatString":格式化字符串。
  • "formatNumberUnit":是否使用数字单位,目前仅支持k、m之类的。
  • "valueSource":数据源key。

  • "limitDataCount":数据点限制量,用于排名只看前几位

    colorRange

    将指定数据源的数据按区间范围呈现不同颜色。颜色的呈现方式有种形式:一.线性渐变;二.颜色区段划分。相关属性如下:

{ "colorRange": { "valueSource": "", "linearRange": [{ "value": 0, "color": { "fillAlpha": 0, "fillColor": "#000000" } }], "sectionRange": [{ "fromValue": 0, "toValue": 60, "color": { "fillAlpha": 0, "fillColor": "#000000" }, "legend": "不及格" }], "dataRange": { "fromValue": 0, "toValue": 100 } } }

"valueSource":数据源key。

线性渐变
{ "linearRange": [{ "value": 0, "color": { "fillAlpha": 0, "fillColor": "#000000" } }] }

"value":逻辑数据值,与坐标轴无关。
"color":在value值时,呈现的颜色。具体属性见fillColor
注意:linearRange数组必须要两个以上的元素。介于value值之间的数据呈现渐变的中间色。

颜色分段划分

{ "sectionRange": [{ "fromValue": 0, "toValue": 60, "color": { "fillAlpha": 0, "fillColor": "#000000" }, "legend": "不及格" }], "dataRange": { "fromValue": 0, "toValue": 100 } }

"sectionRange":
指明在某个数据段要呈现的颜色。

  • "fromValue":开始的逻辑数据值。
  • "toValue":结束的逻辑数据值。
  • "color":数据值在[fromValue, toValue)之间呈现的颜色。
  • "legend":这段数据的说明。

"dataRange":
指明数据的全局范围。

  • "fromValue":数据段的最小值
  • "toValue":数据段的最大值

    NXXYAbstractSeriesStyle

    所有带坐标轴series模板的基类。相关属性如下:
{ // NXSeriesStyle ... // NXXYAbstractSeriesStyle "orientation": "vertical", "xAxis": "bottom", "yAxis": "left", "isTargetSeries": false, "minUnitPointLength": 5, "accumulation": false, "standOnShoulder": false, "showOverlayAll": false }

NXXYAbstractSeriesStyle沿用NXSeriesStyle的样式。
"orientation":表示series呈现图表的方向。默认为vertical,当然可选值还有horizontal。
"xAxis":给series指定x坐标,只需要将属性值设置为指定x轴的id。
"yAxis":给series指定y坐标,只需要将属性值设置为指定y轴的id。
"isTargetSeries":是否是目标系列,用来与实际系列对比标记哪个是目标。默认为false。
"minUnitPointLength" :2个逻辑点之间的最小视图长度。可以控制navigation的出现和消失。当数据点的视图长度小于minUnitPointLength时,navigation就会出现。
"accumulation":是否累计。如果设置为累计,那么第n个数据点显示的值为前n-1个数据点和自己本身的累加值。
"standOnShoulder":是否叠加基于之前的值,但值还是显示原来的值,不显示累计。
"showOverlayAll":是否显示全部数据叠加起来的效果,该属性只在standOnShoulder为true的前提下有效。柱子只在type=NXChartSeriesStackedTypeOverlap 情况下有效。

NXScatterSeries

散点图的样式。NXBubbleSeriesNXAreaSeriesNXLineSeries的模板基类。相关属性如下:
scatterSeries

{ "NXScatterSeries": { // NXSeriesStyle ... // NXXYAbstractSeriesStyle ... // NXScatterSeriesStyle "symbol": { ... }, "defaultSymbolAlphaWhenSymbolNotSpecified": 1 } }

NXScatterSeries沿用NXSeriesStyleNXXYAbstractSeriesStyle的相关属性,当然也可以覆盖替换掉相应的属性。
"symbol":散点图需要有标记物来显示数据点,具体属性见symbol
"defaultSymbolAlphaWhenSymbolNotSpecified":当symbol没有在json中指定时,scatter、bubble呈现有50%的透明度。
"minUnitPointLength"属性只在坐标轴类型为"NXAxisTypeCategory"或"NXAxisTypeDateTime",并且单位长度的视图距离不等于0时有效。

NXLineSeries

线性图的样式。NXStepLineSeries的模板基类。相关属性如下:
lineSeries

{ "NXLineSeries": { // NXSeriesStyle ... // NXXYAbstractSeriesStyle ... // NXScatterSeriesStyle ... // NXLineSeriesStyle "lineType": "NXPlotInterpolationLinear", "lineStyle": { ... } } }

NXLineSeries沿用NXSeriesStyleNXXYAbstractSeriesStyleNXScatterSeries的相关属性。当然也可以覆盖替换掉相应的属性。
"lineType":两个数据点之间连线的类型。可选项有:NXPlotInterpolationLinear(直线),NXPlotInterpolationCurved(贝塞尔曲线)。
"lineStyle":两个数据点之间连线的样式。相关属性见lineStyle

NXAreaSeries

面积图的样式。相关属性如下:
areaSeries

{ "NXAreaSeries": { // NXSeriesStyle ... // NXXYAbstractSeriesStyle ... // NXScatterSeriesStyle ... // NXAreaSeriesStyle "lineType": "NXPlotInterpolationLinear", "lineStyle": { ... }, "areaFillAboveLine": { "fillAlpha": 0, "fillColor": "#000000" }, "areaFillBelowLine": { "fillAlpha": 0, "fillColor": "#000000" }, "stackedType": "NXChartSeriesStackedTypeStack" } }

NXAreaSeries沿用NXSeriesStyleNXXYAbstractSeriesStyleNXScatterSeries的相关属性。当然也可以覆盖替换掉相应的属性。
"lineType":两个数据点之间连线的类型。可选项有:NXPlotInterpolationLinear(直线),NXPlotInterpolationCurved(贝塞尔曲
"lineStyle":两个数据点之间连线的样式。相关属性见lineStyle
"areaFillAboveLine":数据连线上的面积填充色。相关属性见fillColor
"areaFillBelowLine":数据连线下的面积填充色。相关属性见fillColor
"stackedType":图形系列排列形式。可选项有:NXChartSeriesStackedTypeOverlap(竖向重叠)、NXChartSeriesStackedTypeSide(横向排放)、NXChartSeriesStackedTypeStack(竖向叠加)、NXChartSeriesStackedTypeStack100(竖向100%)。

NXBarSeries

柱状图样式。相关属性如下:
barSeries

{ "NXBarSeries": { // NXSeriesStyle ... // NXXYAbstractSeriesStyle ... // NXBarSeriesStyle "stackedType": "NXChartSeriesStackedTypeSide", "interSeriesPadding": 0.1, "interSeriesSetPadding": 0.1, "seriesUnitScale": 1, "stackGroup": "0", "lineStyle": { ... }, "barFill": { ... }, "barOffsetScale": 1, "barCornerRadius": 0, "barBaseCornerRadius": 0, "barWidthsAreInViewCoordinates": false, "isUsingPathDrawing": false } }

NXAreaSeries沿用NXSeriesStyleNXXYAbstractSeriesStyle的相关属性。当然也可以覆盖替换掉相应的属性。

  • "stackedType" :图形系列排列形式。可选项有:NXChartSeriesStackedTypeOverlap(竖向重叠)、NXChartSeriesStackedTypeSide(横向排放)、NXChartSeriesStackedTypeStack(竖向叠加)、NXChartSeriesStackedTypeStack100(竖向100%)。

  • "interSeriesPadding":同一堆下,两个柱子之间的间距,范围[0.0f, 1.0f] 为可用空间百分比,如未设置则由 Series 自己计算

  • "interSeriesSetPadding":不同堆之间,两个堆之间的间距,范围[0.0f, 1.0f] 为可用空间百分比,如未设置则由 Series 自己计算

  • "seriesUnitScale":柱子间隔单位不为1的情况下,提供该值来使柱子的宽度正常
  • "stackGroup":设置堆栈组的key。具有相同stackGroupKey的series属于同一个stackGroup。同一个stackGroup的series可以重叠或累加显示,具体效果要看stackedType设置的属性值。
  • "lineStyle":柱子边框线的样式。相关属性见lineStyle
  • "barFill":柱子的填充色。相关属性见fillColor
  • "barOffsetScale":动画时柱子偏移量的缩放因子
  • "barCornerRadius":柱子上面两个点的圆角半径,默认为0。
  • "barBaseCornerRadius":柱子下面两个点的圆角半径,默认为0。
  • "barWidthsAreInViewCoordinates":表明柱子的宽度和柱子的偏移量是使用视图坐标还是逻辑坐标。默认false,使用逻辑坐标。
  • "isUsingPathDrawing":是否使用Path类来绘制图形。默认false,Path类绘制相对比较耗性能。

    NXBubbleSeries

    泡泡图的样式。相关属性如下:
    bubbleSeries
{ "NXBubbleSeries": { // NXSeriesStyle ... // NXXYAbstractSeriesStyle ... // NXScatterSeriesStyle ... // NXBubbleSeriesStyle "maxRadius": 40, "minRadius": 5 } }

NXBubbleSeries沿用NXSeriesStyleNXXYAbstractSeriesStyleNXScatterSeries的相关属性。当然也可以覆盖替换掉相应的属性。
"maxRadius":泡泡最大的半径。
"minRadius":泡泡最小的半径。

NXStepLineSeries

梯形图的样式。相关属性如下:
stepLineSeries

{ "NXStepLineSeries": { // NXSeriesStyle ... // NXXYAbstractSeriesStyle ... // NXScatterSeriesStyle ... // NXLineSeriesStyle ... // NXStepLineSeriesStyle "stepLineType": "NXStepLinePlotTypeStepCenter", "verticalJoinsVisible": false, "DrawComplete": true } }

NXBubbleSeries沿用NXSeriesStyleNXXYAbstractSeriesStyleNXScatterSeries的相关属性。当然也可以覆盖替换掉相应的属性。
"stepLineType":梯形线绘制的类型。可选项有:"NXStepLinePlotTypeStepForward"(梯形线以数据点为起始点)、"NXStepLinePlotTypeStepCenter"(梯形线以数据点为中心点)、"NXStepLinePlotTypeStepBackward"(数据线以数据点为结束点)。
"verticalJoinsVisible":相邻两个数据点的起始点和结束点的连接是否可见。默认可见。
"DrawComplete":梯形线是否画完整。默认stepLineType是center的时候画完整的图形。即第一个点和最后一个点可以出现整条平的线。

NXMapSeries

地图的样式。地图是一个大区域,由很多的小区域组装而成,下面是对小区域样式的解析。相关属性如下:
mapSeries

{ "NXMapSeries": { // NXSeriesStyle ... // NXMapSeriesStyle "regionFill": { ... }, "regionLine": { ... }, "plotSymbol": { ... }, "focusZoomOnSelect": false, "mapRegionGroups": [{ "key": "", "name": "", "regionLine": { ... }, "regionFill": { ... }, "values": [{ "" }] }], "mapMarkers": [{ "name": "", "latitude": 0, "longitude": 0, "markerSymbol": { ... } }], "mapType": "China", "customResource": "" } }

NXMapSeries沿用NXSeriesStyle的相关属性。当然也可以覆盖替换掉相应的属性。

区域通用属性

"regionFill":区域普遍的填充色。相关属性见fillColor
"regionLine":区域边界线普遍的样式。相关属性见lineStyle
"plotSymbol":地图上需要有标记物来标注某个指定的地理位置。该属性指代标记物普遍的样式。相关属性见symbol
"focusZoomOnSelect":是否当某个区域选中的时候该区域放大。

区域分组属性

mapType

指明地图的类型。可选项有:"China"、"USA"、"World"、"Europe"、"Custom"。除了"Custom",如果设置了其他地图类型,那么NiuChart就会自动导入相应类型地图的SVG。

customResource

如果设置了mapTypeCustom自定义地图,那么就需要给customResource设置自定义SVG地图资源的文件名。该自定义SVG地图资源文件存放在NiuChart-Chart工程下的res/raw/路径下。

mapRegionGroups

NiuChart针对需要区域划分的场景,提出了对地图区域进行分组的概念。例如,需要将中国地图分组为华东、华西、华北、华南、华中,每个分组中都包含若干个省,同个分组中的不同省份使用相同的样式来显示。相关属性如下:

{ "mapRegionGroups": [{ "key": "", "name": "", "regionLine": { ... }, "regionFill": { ... }, "values": [{ "" }] }] }

"key":区域分组的key。
"name":区域分组的name。
"regionLine":区域分组内所有区域边界线的样式。
"regionFill":区域分组内所有区域的填充色。
"values":区域分组所包含区域的key列表。该列表中的区域都属于该分组,共同使用该分组的"regionLine"和"regionFill",覆盖替换掉区域通用属性中的相应属性。

mapMarkers

地图上需要有标记物来标注某个具体经纬度的地理位置。相关属性如下:

{ "mapMarkers": [{ "name": "", "latitude": Float.NaN, "longitude": Float.NaN, "markerSymbol": { ... } }] }

"name":该标记物的名称。
"latitude":标记物所在地理位置的纬度。
"longitude":标记所在地理位置的经度。
"markerSymbol":标记物的样式。相关属性见symbol

NXPieSeries

饼图的样式。相关属性如下:
pieSeries

{ "NXPieSeries": { // NXSeriesStyle ... // NXPieSeriesStyle "pieRadius": "100%", "pieInnerRadius": "0", "startAngle": "0", "endAngle": "0", "sliceDirection": "NXPieDirectionClockwise", "centerAnchor": { "x": 0.5, "y": 0.5 }, "indicatorAngle": 0, "borderLineStyle": { ... }, "overlayFill": { ... }, "triangleFill": { ... } } }

NXPieSeries沿用NXSeriesStyle的相关属性。当然也可以覆盖替换掉相应的属性。
"pieRadius":饼图的半径。可以是具体的数值,也可以是相对于整张图表的百分比。默认是100%。
"pieInnerRadius":饼图的内半径。可以是具体的数值,也可以是相对于整张图表的百分比。默认是0。
"startAngle":饼图转动开始的角度。默认0。
"endAngle":饼图转动结束的角度。默认0。
"sliceDirection":饼图转动的方向。默认为顺时针。可选项有:"NXPieDirectionClockwise"(顺时针)、"NXPieDirectionCounterClockwise"(逆时针)。
"centerAnchor":饼图的圆心锚点。默认为整张图表的中心,(0.5,0.5)。
"indicatorAngle":指示器的角度。默认0。
"borderLineStyle":饼图区块的边界线的样式。相关属性见lineStyle
"overlayFill":饼图区块上的覆盖物的填充色。相关属性见fillColor
"triangleFill":三角形指示器的填充色。相关属性见fillColor

NXRingSeries

环图的样式。相关属性如下:
ringSeries

{ "NXRingSeries": { // NXSeriesStyle ... // NXRingSeriesStyle "radius": "100%", "ringWidth": 20, "noteTitleStyle": { ... }, "legendTitleStyle": { .. }, "backFill": { ... }, "centerAnchor": { "x": 0.5, "y": 0.5 }, "legendLabelHeight": 44 } }

NXRingSeries沿用NXSeriesStyle的相关属性。当然也可以覆盖替换掉相应的属性。
"radius":内环的半径。可以是具体的数值,也可以是相对于整张图表的百分比。默认是100%。
"ringWidth":内环和外环的间距。单位为dp。
"noteTitleStyle":环内的文本样式。具体属性见textStyle
"legendTitleStyle":环底部的说明标签文本样式。具体属性见textStyle
"backFill":环的填充色。相关属性见fillColor
"centerAnchor":圆心的锚点。默认为整张图表的中心,(0.5,0.5)。
"legendLabelHeight":环底部的说明标签高度。默认是44dp。

NXSingleSeries

单值图的样式。相关属性如下:
singleSeries

{ "NXSingleSeries": { // NXSeriesStyle ... // NXSingleSeriesStyle "legendTitle": "", "legendLabelHeight": 44, "barWidth": 40, "noteTitleStyle": { ... }, "legendTitleStyle": { ... }, "backFill": { ... }, "centerAnchor": { "x": 0.5, "y": 0.5 }, "targetLineStyle": { ... } } }

NXSingleSeries沿用NXSeriesStyle的相关属性。当然也可以覆盖替换掉相应的属性。
"legendTitle":single series 的说明标签。如果设置了legendTitle,将会用此标题替换原colorRange里设定的legend。
"legendLabelHeight":说明标签的高度。如果legendTitle不为null,默认为44;否则默认为0。
"barWidth":表示单值图的柱子的宽度。默认为40.
"noteTitleStyle":柱子上面文本的样式。相关属性见textStyle
"legendTitleStyle":说明标签的文本样式。相关属性见textStyle
"backFill":柱子的填充色。相关属性见fillColor
"centerAnchor":绘制的中心锚点。默认为整张图表的中心,(0.5,0.5)
"targetLineStyle":目标线的样式。相关属性见lineStyle

NXRadarSeries

雷达图的样式。相关属性如下:
radarSeries

{ "NXRadarSeries": { // NXSeriesStyle ... // NXXYAbstractSeriesStyle ... // NXRadarSeriesStyle "lineStyle": { ... }, "symbol": { ... }, "fill": { ... }, "darkenFillColor": "", "darkenFillAlpha": 0.3, "highLightFillColor": "", "highLightFillAlpha": 0.1, "darkenLineColor": "", "darkenLineAlpha": 0, "highLightLineColor": "", "highLightLineAlpha": 1 } }

NXRadarStyle沿用NXSeriesStyleNXXYAbstractSeriesStyle的相关属性。当然也可以覆盖替换掉相应的属性。

"lineStyle":雷达图两点之间连线的样式。相关属性见lineStyle
"symbol":雷达图选中点的标记物。相关属性见symbol
"fill":雷达图上各个点形成的封闭多边形的填充色。相关属性见fillColor
"darkenFillColor":fill的未激活颜色
"darkenFillAlpha":fill的未激活透明度
"highLightFillColor":fill的高亮颜色
"highLightFillAlpha":fill的高亮透明度
"darkenLineColor":lineStyle的未激活颜色
"darkenLineAlpha":lineStyle的未激活透明度
"highLightLineColor":lineStyle的高亮颜色
"highLightLineAlpha":lineStyle的高亮透明度

results matching ""

    No results matching ""