NXChart

当卡片的类型chartType设置为"NXChart"时，card使用如下样式：

{ "type":"NXCubeCard", "style":{ "chart": { ... }, "footer": { ... }, "detailTopPanel": { ... }, "detailTotalPanel": { ... }, "detailLeftPanel": { ... }, "annotation": { ... }, "detailRightPanel": { ... }, "type": "NXChart" } }

chart

chart配置的相关属性见chart

chart底部导航条的样式。相关属性如下：

{ "footer": { "navigation": { "visible": true, "navigationType": "NXSliderTypeChart", "orientation": "horizontal", "minGapDistance": 0, "maxGapDistance": 0, "outRangeFill": { "visible": false, "fillColor": "", "fillAlpha": 0.3, "cornerRadius": 0 }, "inRangeFill": { "visible": false, "fillColor": "", "fillAlpha": 0.3, "cornerRadius": 0 }, "backgroundTrackFill": { ... }, "handleBarFill": { ... } } "length": 40 } }

length

当导航条是水平的时候，导航条的高度为length；当导航条是垂直的时候，导航条的宽度为length。

navigation

chart底部导航条的样式。相关属性如下：

{ "navigation": { "visible": true, "navigationType": "NXSliderTypeChart", "orientation": "horizontal", "minGapDistance": 0, "maxGapDistance": 0, "outRangeFill": { ... }, "inRangeFill": { ... }, "backgroundTrackFill": { ... }, "handleBarFill": { ... } } }

"visible"：表示底部导航条是否可见。
"navigationType"：底部导航条的类型。可选项有："NXSliderTypeChart"(有缩略图),"NXSliderTypeLine"(中间只有一根线)
"orientation"：底部导航条的方向。可以是"horizontal"(水平),"vertical"(垂直)
"minGapDistance"：两端最小的间距。
"maxGapDistance"：两端最大的间距。
"outRangeFill"：当"navigationType"为"NXSliderTypeChart"时，未选中区域背景的填充。相关属性见footerFillStyle
"inRangeFill"：当"navigationType"为"NXSliderTypeChart"时，已选中区域背景的填充。相关属性见footerFillStyle
"backgroundTrackFill"：当"navigationType"为"NXSliderTypeLine"时，垂直居中背景线的风格。相关属性见fillColor
"handleBarFill"：当"navigationType"为"NXSliderTypeLine"时，拖动条的填充色。相关属性见fillColor

footerFillStyle

chart底部导航条区域背景的填充。相关属性如下：

{ "visible": false, "fillColor": "#000000", "fillAlpha": 0.3, "cornerRadius": 0 }

"visible"：该区域背景是否可见。
"fillColor"：该区域背景的填充色。
"fillAlpha"：该区域背景的透明度。
"cornerRadius"：该区域背景框角的孤度。

detailTopPanel

顶部的数据详情面板。该面板为通用面板，即所有类型的图表都可以通过json文件配置得到。相关属性如下：
detailTopPanel

{ "detailTopPanel": { "visible": true, "type": "NXDetailNormal", "isAlwaysVisible": true, "percentInTotalVisible": false } }

"visible"：设置该面板是否显示。
"type"：设置该面板的显示类型。具体属性见detailPanelType
"isAlwaysVisible"：设置该面板是否一直可见。若是的话，位下title下面；若不是的话，覆盖在title上。
"percentInTotalVisible"：设置该面板的数值在总数中的百分比是否显示。

detailTotalPanel

额外的数据详情总数面板。该面板默认图表是饼图时才显示。相关属性如下：
detailTotalPanel

{ "detailTotalPanel": { "visible": false, "isAboveDetailTop": false } }

"visible"：设置该面板是否显示。
"isAboveDetailTop"：设置该面板是否显示在detailTopPanel的上面。

detailLeftPanel

左侧的数据详细面版。该面板默认在pad端且图表是泡泡图时才显示。相关属性如下：
detailLeftPanel

{ "detailLeftPanel": { "visible": true, "type": "NXDetailMultiMeasureVertical", "isAlwaysVisible": true, "percentInTotalVisible": false } }

  • "visible" ：设置该面板是否显示。如果该面板显示，那么该面板会自动将"isAlwaysVisible"设置为false;并且双指时显示配合左详细面板的比较器，见NXDetailTopCooperateLeftCompare。

  • "type"：设置该面板的显示类型。具体属性见detailPanelType
    "isAlwaysVisible" ：设置该面板是否一直可见。若是的话，位下title下面；若不是的话，覆盖在title上。当visible为true时，该属性无效。

  • "percentInTotalVisible"：设置该面板的数值在总数中的百分比是否显示。

annotation

当图表中存在多个series时，可以通过annotation来筛选显示需要的series。当图表是泡泡图的时候，默认显示annotation。相关属性如下：
annotation

{ "annotation": { "visible": false, "isAlwaysVisible": false, "horizontal": false, "width": 170, "itemHeight": 40, "decorationMarginLeft": 1, "titleMarginLeft": 20, "titleStyle": { ... }, "symbolStyle": { ... } } }

"visible"：设置annotaion是否显示。
"isAlwaysVisible"：设置是否一直显示。
"horizontal"：设置是水平显示series列表还是垂直显示。
"width"：宽度。
"itemHeight"：条目的高度。
"decorationMarginLeft"：左侧的checkBox距离左侧的margin值。
"titleMarginLeft"：title标签距离左侧的margin值。
"titleStyle"：title标签的文本样式。具体属性见textStyle
"symbolStyle"：checkBox的样式。具体属性见symbol

detailRightPanel

右侧的图形粒度数据点呈现列表。只有饼图和地图才有该面板。相关属性如下：
detailRightPanel

{ "detailRightPanel": { "visible": false, "isAlwaysVisible": false, "horizontal": false "maxWidth": 0, "measureValueHeight": 35, "secondMeasureValueHeight": 20, "measureValueSource": null, "secondMeasureValueSource": null, "measureValueFormat": "#,###", "secondMeasureValueFormat": "#.#%", "secondMeasurePercent": true, "measureTitleTextStyle": { "textSize": 14 "textColor": "#4a555f" }, "measureValueTextStyle": { "textSize": 28 "textColor": "#dcdde0" }, "secondMeasureValueTextStyle": { "textSize": 14 "textColor": "#dcdde0" } } }

"visible"：设置该面板是否可见。
"isAlwaysVisible"：设置该面板是否一直可见。
"horizontal"：默认false，该面板布局在卡片的右边。但有时由于panel内的文字过长，卡片内的图表会被截断，为了避免这种情况的发生，niuchart引入了该属性。当该属性为true时，该面板布局在卡片的上方，改为了横向滑动。 "maxWidth"：行的最大宽度，当最大限制是0时表示无限制。
"measureValueHeight"：显示第一个测量值的控件的高度。
"secondMeasureValueHeight"：显示第二个测量值的控件的高度。
"measureValueSource"：第一个测量值的数据来源，默认为null，程序自动指定。
"secondMeasureValueSource"：第二个测量值的数据来源，默认为null，程序自动指定。
"measureValueFormat"：第一个测量值的格式化
"secondMeasureValueFormat"：第二个测量值的格式化
"secondMeasurePercent"：是否第二个测量值显示百分比
"measureTitleTextStyle"：测量标题的文本样式
"measureValueTextStyle"：第一个测量值的文本样式
"secondMeasureValueTextStyle"：第二个测量值的文本样式

detailPanelType

详细面板的类型。可选项有：

  • 常态。"NXDetailNormal","NXDetailNormalCompare"
  • 目标值与实际值对比。"NXDetailNormalTargetReal"
  • 常态大字体版本。"NXDetailBigValueNormal","NXDetailBigValueNormalCompare"
  • 竖直多度量，用于气泡图。"NXDetailMultiMeasureVertical","NXDetailMultiMeasureVerticalCompare"
  • 竖直多度量，用于气泡图，2行版本。"NXDetailMultiMeasureHorizontal","NXDetailMultiMeasureHorizontalCompare"
  • 横向多度量，用于气泡图。"NXDetailMultiMeasureGrid","NXDetailMultiMeasureGridCompare"
  • NXDetailTopCooperateLeftCompare ： 与左侧详细面板组合用的上边比较器。具体概念见图：
    detailTopCooperateLeftCompare
  • NXDetailVertical：phone端竖直的。

results matching ""

    No results matching ""