一个report以card作为图表的最小逻辑分割承载故事片段。不管何种形式的卡片都以多维数据作为数据源，当粒度值切换后会重新刷新。

先了解卡片的各个部分或概念。下面这张图片，描述了卡片中的主要概念：
card_line

基础卡片节点的配置属性如下：

{ "id": "", "cardTitle": "", "type": "NXCubeCard", "dataSetId": "", "size": "row-xs-12 col-xs-12 row-md-6 col-md-6", "dataStructure": { ... }, "linkEvent": { "isEventSource": true } "padding": { ... }, "header": { ... }, "style":{ ... } }
  • "dataSetId"：card拥有的数据库对应于report中metaStructure的key。

  • "dataStructure"：card拥有的数据库的structure。与report中具有相同dataSetId的metaStructure对应的是同一个数据库,且维粒度、度量都应是其子集。详情见structure

  • "type"：card的类型。可选项有："NXCubeCard"，＂NXImageCard＂，＂NXHtmlCard＂，＂NXTextCard＂，＂NXBlankCard＂，＂NXContainerCard＂。　　

  • "id"：card的唯一标识码。
  • "cardTitle"：card的标题。
  • "enableZoom"：是否允许双指双击放大，默认true。
  • "size"：card在不同尺寸设备上显示的大小。详情见不同屏幕尺寸的适配
  • "linkEvent"：卡片是否当作联动事件源，详情见LinkEvent
  • "padding":卡片的内边距，具体属性见paddingStyle
  • "header":卡片的头部样式，具体属性见header

不同屏幕尺寸的适配

响应式栅格系统排版系统

  • col代表列宽
  • row代表行高

随着外层视图的尺寸变化产生相应的排版，可将同一报表适应于平板电脑及手机。默认将横向分割成12列，竖向也分割成12列。根据屏幕分别将长宽分成4类：超小-xs，小-sm，中等-md，大-lg,超大-xl。栅格设置在父容器宽度大于或等于阈值的时候起作用，并且将小的长宽设置覆盖掉。因此，对任何一个元素应用任何.col-md- 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备（如果没有设置.col-lg-的话）
可用以下设置宽度：col-xs-, col-sm-, col-md-, col-lg-. 星号为[0,numberOfColumns]到间的整数。例如将宽度设置成"col-md-4 col-sm-6"表示父容器宽度在md范围情况下占父容器的三分之一，父容器宽度在sm范围情况下占父容器的二分之一，以此设置适应各种大小的屏幕。
可用以下设置高度：row-xs-, row-sm-, row-md-, row-lg-. 星号为[0,numberOfRows]到间的整数。例如将高度设置成"row-md-4 row-sm-6"表示父容器高度在md范围情况下占父容器的三分之一，父容器高度在sm范围情况下占父容器的二分之一，以此设置适应各种大小的屏幕。

超小 小 中 大 超大
XS SM MD LG XL
[0,544) [544dp,768) [768,992) [992,1200) [1200,无穷)

Android:单位是dp,父容器是指NXReportActivity打开后的大小。并且设备的分辨率大小（因Android还有返回任务栏）。 iOS:单位是px.上述大小为设备的分辨率

忽略设备定大小

当所有设备大小都是希望是一样大时直接把中间的xs/sm/md/lg/xl去掉。如row-4就可以表示高占父容器的1/3.

针对Android混杂的设备尺寸

因Android设备分辨率太多，如果希望在特定的横竖分辨率下显示不同的排版。需要加入一个横竖相对大小，即下一行例子中的红色部分:

col-md-lg-6:表示在设备横向大小是md，纵向大小是lg的此种大小设备下的列宽是屏幕宽的一半。 row-xl-sm-8:表示在设备纵向小大是xl，横向大小是sm的此种大小设备下的行高是屏幕高的8/12。

联动事件

{ "linkEvent": { "isEventSource": true } }

"isEventSource": 是否是联动事件源，如果是的话，当触发粒度、度量改变后会发出事件让同页面的其它卡片跟着改变。默认为true.

卡片顶部栏目的样式。相关属性如下：

{ "header": { "height": 40, "titleLabel": { ... }, "conditions": { "borderVisible": true, "height": 0, "gap": 10, "conditionColor": { ... }, "conditionRadius": [0, 0], "conditionSelectedColor": { ... }, "conditionLabel": { ... }, "dropDown": { "width": 150, "height": 300, "backgroundColor": { ... }, "borderline": { ... }, "textLabel": { ... } } } } }

"height"：head的高度。
"titleLabel"：文字标题样式。具体属性见textStyle
"conditions"：头部条件选项的样式。

  • "borderVisible"：条件选项的边框是否可见。
  • "height"：条件选项框的高度。
  • "gap"：条件选项框的间隔。
  • "conditionColor"：条件选项框的底色。空时表示不用画，即透明的。具体属性见fillColor
  • "conditionRadius"：条件圆框半径。2个float值。
  • "conditionSelectedColor"：条件选项框选中的填充色。空时表示用page的主打色。具体属性见fillColor
  • "conditionLabel"：条件标题样式。具体属性见textStyle
  • "dropDown"：下拉框样式。
    • "width"：下拉框的宽度。默认为150dp
    • "height"：下拉框的高度。默认为300dp
    • "backgroundColor"：下拉框的背景色。具体属性见fillColor
    • "borderline"：下拉框的边界线样式。具体属性见lineStyle
    • "textLabel"：下拉框内文本标签的样式。具体属性见textStyle

results matching ""

    No results matching ""