配置文件
根据不同的业务需求可以配置成相应的可视形态。
完整的配置文件如下:
{
"defaultStyle": [
{
"chartOptions": {},
"defaultColor": [
"#e84d60",
"#e88f61",
"#fecd6c",
"#b3cf61",
"#77c298",
"#51a9d6",
"#718dbf",
"#955cbf",
"#a4547d",
"#c64373"
],
"scopeId": [
"all"
],
"scopeType": "report"
}
],
"metadataStructures": [
{
"dataSetId": "707ff652-263f-4977-8f19-6a329f94ab25",
"dimensions": [
{
"granularities": [
{
"key": "COL_0",
"title": "城市"
}
],
"key": "Dimension_1",
"title": "区域"
},
{
"granularities": [
{
"key": "COL_3",
"linkMatchKey": "yearOfKey",
"selectionValue": "2015",
"title": "年"
},
{
"dateFormat": {
"xDataSourceDateFormatString": "MM",
"xDataSourceDateLocale": "zh",
"xDisplayDateFormatString": "MMM",
"xDisplayDateLocale": "zh"
},
"drillTo": true,
"key": "COL_4",
"linkMatchKey": "monthKey",
"title": "月"
},
{
"key": "COL_5",
"linkMatchKey": "dayOfKey",
"title": "日"
}
],
"key": "Dimension_3",
"title": "时间"
},
{
"granularities": [
{
"key": "COL_2",
"title": "污染情况"
}
],
"key": "Dimension_2",
"title": "空气质量情况"
}
],
"measures": [
{
"aggregator": "count",
"aggregatorGroupByLastGran": true,
"aggregatorSubGranKey": "COL_5",
"key": "COL_1",
"title": "次数"
}
]
},
{
"dataSetId": "3946ed0d-a3b5-43c6-9b56-97b5966879de",
"dimensions": [
{
"granularities": [
{
"key": "COL_0_0",
"linkMatchKey": "yearOfKey",
"selectionValue": "2015",
"title": "年"
},
{
"drillTo": true,
"key": "COL_0_1",
"linkMatchKey": "monthKey",
"regularExpression": "(.*)月$",
"sort": "NXSortOperationAsc",
"sortLanguage": "NXSortRegularExpressNum",
"title": "月"
},
{
"key": "COL_0_2",
"linkMatchKey": "dayOfKey",
"title": "日"
},
{
"key": "COL_0_3",
"title": "时刻"
}
],
"key": "Dimension_1",
"title": "时间"
},
{
"granularities": [
{
"key": "COL_0_4",
"title": "交通类型"
},
{
"key": "COL_0_5",
"title": "站点"
}
],
"key": "Dimension_2",
"title": "交通方式"
}
],
"measures": [
{
"key": "COL_0_6",
"title": "交易量"
}
]
},
{
"dataSetId": "ee58500e-3468-42a6-84cc-037c75d6c27c",
"dimensions": [
{
"granularities": [
{
"key": "COL_6",
"title": "城市"
}
],
"key": "Dimension_3",
"title": "区域"
},
{
"granularities": [
{
"key": "COL_1",
"linkMatchKey": "yearOfKey",
"selectionValue": "2015",
"title": "年"
},
{
"dateFormat": {
"xDataSourceDateFormatString": "MM",
"xDataSourceDateLocale": "zh",
"xDisplayDateFormatString": "MMM",
"xDisplayDateLocale": "zh"
},
"drillTo": true,
"key": "COL_2",
"linkMatchKey": "monthKey",
"title": "月"
},
{
"key": "COL_3",
"linkMatchKey": "dayOfKey",
"title": "日"
}
],
"key": "Dimension_1",
"title": "时间"
},
{
"granularities": [
{
"key": "COL_5",
"title": "污染情况"
}
],
"key": "Dimension_2",
"title": "空气质量情况"
}
],
"measures": [
{
"aggregator": "count",
"aggregatorGroupByLastGran": true,
"aggregatorSubGranKey": "COL_3",
"key": "COL_4",
"title": "次数"
}
]
}
],
"pages": [
{
"cards": [
{
"size": "row-sm-xs-6 row-xs-sm-12 row-md-3 row-md-sm-6 row-lg-md-3 col-xs-sm-12 col-sm-xs-6 col-sm-md-12 col-sm-lg-12 col-md-12 col-md-lg-12 col-md-sm-6 col-lg-6 ",
"subCards": [
{
"cardTitle": "空气质量AQI",
"dataSetId": "707ff652-263f-4977-8f19-6a329f94ab25",
"size": "row-sm-xs-6 row-xs-sm-12 row-md-3 row-md-sm-6 row-lg-md-3 col-xs-sm-12 col-sm-xs-12 col-sm-lg-12 col-md-12 col-md-lg-12 col-md-sm-6 col-lg-6 ",
"structure": {
"dimensions": [
{
"granularities": [
{
"key": "COL_0",
"title": "城市"
}
],
"key": "Dimension_1",
"title": "区域"
},
{
"granularities": [
{
"key": "COL_3",
"title": "年"
},
{
"key": "COL_4",
"title": "月"
},
{
"key": "COL_5",
"title": "日"
}
],
"key": "Dimension_3",
"title": "时间"
},
{
"granularities": [
{
"key": "COL_2",
"title": "污染情况"
}
],
"key": "Dimension_2",
"title": "空气质量情况"
}
],
"measures": [
{
"key": "COL_1",
"title": "AQI"
}
]
},
"style": {
"chart": {
"chartConfig": {
"series": [
{
"dataSource": {
"yValueSource": "COL_1"
},
"id": "pie",
"type": "NXPieSeries"
}
],
"touchTools": [
{
"targetSeries": [
"pie"
],
"toolType": "NXPieSpinTool"
}
]
},
"selection": {
"selectionSource": "Y",
"selectionType": "NXChartSelectionBiggestValue"
}
},
"detailRightPanel": {
"visible": true
},
"detailTopPanel": {
"percentInTotalVisible": true,
"type": "NXDetailVertical",
"visible": false
},
"detailTotalPanel": {
"isAboveDetailTop": true
}
},
"type": "NXCubeCard"
},
{
"cardTitle": "空气PM2.5浓度",
"dataSetId": "ee58500e-3468-42a6-84cc-037c75d6c27c",
"size": "row-sm-xs-6 row-xs-sm-12 row-md-3 row-md-sm-6 row-lg-md-3 col-xs-sm-12 col-sm-xs-12 col-sm-lg-12 col-md-12 col-md-lg-12 col-md-sm-6 col-lg-6 ",
"structure": {
"dimensions": [
{
"granularities": [
{
"key": "COL_6",
"title": "城市"
}
],
"key": "Dimension_3",
"title": "区域"
},
{
"granularities": [
{
"key": "COL_1",
"linkMatchKey": "yearOfKey",
"selectionValue": "2015",
"title": "年"
},
{
"dateFormat": {
"xDataSourceDateFormatString": "MM",
"xDataSourceDateLocale": "zh",
"xDisplayDateFormatString": "MMM",
"xDisplayDateLocale": "zh"
},
"drillTo": true,
"key": "COL_2",
"linkMatchKey": "monthKey",
"title": "月"
},
{
"key": "COL_3",
"linkMatchKey": "dayOfKey",
"title": "日"
}
],
"key": "Dimension_1",
"title": "时间"
},
{
"granularities": [
{
"key": "COL_5",
"title": "污染情况"
}
],
"key": "Dimension_2",
"title": "空气质量情况"
}
],
"measures": [
{
"key": "COL_4"
}
]
},
"style": {
"chart": {
"chartConfig": {
"series": [
{
"dataSource": {
"yValueSource": "COL_4"
},
"id": "pie",
"type": "NXPieSeries"
}
],
"touchTools": [
{
"targetSeries": [
"pie"
],
"toolType": "NXPieSpinTool"
}
]
},
"selection": {
"selectionSource": "Y",
"selectionType": "NXChartSelectionBiggestValue"
}
},
"detailRightPanel": {
"visible": true
},
"detailTopPanel": {
"percentInTotalVisible": true,
"type": "NXDetailVertical",
"visible": false
},
"detailTotalPanel": {
"isAboveDetailTop": true
}
},
"type": "NXCubeCard"
}
]
},
{
"cardTitle": "长住居民交通交易量",
"dataSetId": "3946ed0d-a3b5-43c6-9b56-97b5966879de",
"size": "row-sm-xs-6 row-xs-sm-12 row-md-3 row-md-sm-3 row-lg-md-3 col-xs-sm-12 col-sm-xs-6 col-sm-md-12 col-sm-lg-12 col-md-12 col-md-lg-12 col-md-sm-6 col-lg-6 ",
"structure": {
"dimensions": [
{
"granularities": [
{
"index": 1,
"key": "COL_0_4",
"title": "交通类型"
},
{
"key": "COL_0_5",
"title": "站点"
}
],
"key": "Dimension_2",
"title": "交通方式"
},
{
"granularities": [
{
"key": "COL_0_0",
"title": "年"
},
{
"drillTo": true,
"index": 2,
"key": "COL_0_1",
"title": "月"
},
{
"index": 3,
"key": "COL_0_2",
"title": "日"
},
{
"index": 4,
"key": "COL_0_3",
"title": "时刻"
}
],
"key": "Dimension_1",
"title": "时间"
}
],
"measures": [
{
"key": "COL_0_6",
"title": "交易量"
}
]
},
"style": {
"annotation": {
"isAlwaysVisible": true,
"visible": true,
"width": 120
},
"chart": {
"chartConfig": {
"axis": [
{
"axisType": "NXAxisTypeCategory",
"id": "bottom"
},
{
"axisType": "NXAxisTypeNumberic",
"coordinate": "NXCoordinateY",
"id": "left",
"majorPoint": {
"label": {
"labelFormatter": ",###",
"labelNumberUnit": false
}
},
"minValue": 0
}
],
"series": [
{
"dataSource": {
"yValueSource": "COL_0_6"
},
"fill": {
"fillColor": "#955cbf"
},
"id": "barSeries",
"iteration": {
"isMultiLevel": true
},
"orientation": "vertical",
"type": "NXLineSeries",
"xAxis": "bottom",
"yAxis": "left"
}
],
"touchTools": [
{
"crossAxis": "bottom",
"enableMultiTouch": true,
"removeOnRelease": false,
"showBelowSeries": false,
"targetSeries": [
"barSeries"
],
"toolPlot": {
"innerSymbol": {
"anchorPoint": {
"x": 0.5,
"y": 0.5
},
"symbolSize": {
"height": 10,
"width": 10
},
"symbolType": "NXPlotSymbolTypeEllipse"
},
"multiTouchLineType": "NXLineToolTypeVertical",
"outerSymbol": {
"anchorPoint": {
"x": 0.5,
"y": 0.5
},
"symbolFill": {
"fillColor": "#ffffff"
},
"symbolSize": {
"height": 20,
"width": 20
},
"symbolType": "NXPlotSymbolTypeEllipse"
},
"singleTouchLineType": "NXLineToolTypeVertical"
},
"toolType": "NXLineTool",
"visible": true
},
{
"active": true,
"crossAxis": "bottom",
"targetSeries": [
"barSeries"
],
"toolType": "NXChangeActiveSeriesTool"
}
]
}
},
"selection": {
"selectionSource": "Y",
"selectionType": "NXChartSelectionBiggestValue"
}
},
"type": "NXCubeCard"
},
{
"cardTitle": "交通交易量(地点)排名前10",
"dataSetId": "3946ed0d-a3b5-43c6-9b56-97b5966879de",
"size": "row-sm-xs-6 row-xs-sm-12 row-md-3 row-md-sm-6 row-lg-md-3 col-xs-sm-12 col-sm-xs-12 col-sm-lg-12 col-md-12 col-md-lg-12 col-md-sm-6 col-lg-6 ",
"structure": {
"dimensions": [
{
"granularities": [
{
"key": "COL_0_0",
"title": "年"
},
{
"key": "COL_0_1",
"title": "月"
},
{
"drillTo": true,
"key": "COL_0_2",
"title": "日"
},
{
"key": "COL_0_3",
"title": "时刻"
}
],
"key": "Dimension_1",
"title": "时间"
},
{
"granularities": [
{
"key": "COL_0_4",
"title": "交通类型"
},
{
"drillTo": true,
"key": "COL_0_5",
"title": "站点"
}
],
"key": "Dimension_2",
"title": "交通方式"
}
],
"measures": [
{
"key": "COL_0_6",
"title": "交易量"
}
]
},
"style": {
"chart": {
"chartConfig": {
"axis": [
{
"axisType": "NXAxisTypeNumberic",
"id": "bottom",
"majorPoint": {
"gridLine": {
"gridLineVisible": true
},
"label": {
"labelFormatter": ",###",
"labelNumberUnit": true
}
}
},
{
"axisType": "NXAxisTypeCategory",
"coordinate": "NXCoordinateY",
"id": "left",
"majorPoint": {
"gridLine": null
}
}
],
"series": [
{
"accumulation": false,
"barFill": {
"fillColor": "#51a9d6"
},
"dataSource": {
"limitDataCount": 10,
"yValueSource": "COL_0_6"
},
"id": "bar",
"orientation": "horizontal",
"showOverlayAll": false,
"stackedType": "NXChartSeriesStackedTypeSide",
"type": "NXBarSeries",
"xAxis": "bottom",
"yAxis": "left"
}
],
"touchTools": [
{
"crossAxis": "bottom",
"enableMultiTouch": false,
"removeOnRelease": false,
"showBelowSeries": false,
"targetSeries": [
"bar"
],
"toolType": "NXHighLightTool",
"visible": true
}
]
}
},
"selection": {
"selectionSource": "Y",
"selectionType": "NXChartSelectionBiggestValue"
}
},
"type": "NXCubeCard"
},
{
"cardTitle": "高峰使用时段",
"dataSetId": "3946ed0d-a3b5-43c6-9b56-97b5966879de",
"size": "row-sm-xs-6 row-xs-sm-12 row-md-3 row-md-sm-6 row-lg-md-3 col-xs-sm-12 col-sm-xs-12 col-sm-lg-12 col-md-12 col-md-lg-12 col-md-sm-6 col-lg-6 ",
"structure": {
"dimensions": [
{
"granularities": [
{
"key": "COL_0_4",
"title": "交通类型"
},
{
"drillTo": true,
"key": "COL_0_5",
"title": "站点"
}
],
"key": "Dimension_2",
"title": "交通方式"
},
{
"granularities": [
{
"key": "COL_0_0",
"title": "年"
},
{
"key": "COL_0_1",
"title": "月"
},
{
"drillTo": true,
"key": "COL_0_3",
"title": "时刻"
}
],
"key": "Dimension_1",
"title": "时间"
}
],
"measures": [
{
"key": "COL_0_6",
"title": "交易量"
}
]
},
"style": {
"chart": {
"chartConfig": {
"axis": [
{
"axisType": "NXAxisTypeCategory",
"id": "bottom"
},
{
"axisType": "NXAxisTypeNumberic",
"coordinate": "NXCoordinateY",
"id": "left",
"majorPoint": {
"label": {
"labelFormatter": ",###",
"labelNumberUnit": true
}
}
}
],
"series": [
{
"barFill": {
"fillColor": "#51a9d6"
},
"dataSource": {
"yValueSource": "COL_0_6"
},
"id": "bar",
"orientation": "vertical",
"stackedType": "NXChartSeriesStackedTypeSide",
"type": "NXBarSeries",
"xAxis": "bottom",
"yAxis": "left"
}
],
"touchTools": [
{
"crossAxis": "bottom",
"enableMultiTouch": false,
"removeOnRelease": false,
"showBelowSeries": false,
"targetSeries": [
"bar"
],
"toolType": "NXHighLightTool",
"visible": true
},
{
"targetSeries": [
"bar"
],
"toolType": "NXNavigationTool",
"visible": true
}
]
}
},
"selection": {
"selectionSource": "Y",
"selectionType": "NXChartSelectionBiggestValue"
}
},
"type": "NXCubeCard"
}
],
"pageColor": "#718dbf",
"pageTitle": "空气质量AQI"
}
],
"title": "空气质量AQI"
}
####第一张卡片解析
第一张卡片是一个容器，一个容器里可以装多个子卡片，子卡片按布局填充当前页面，填充不了的放下一页，用手势快速滑动来切换，容器卡片底部会有一个翻页的页表示一共有几页。
维度中如果所有粒度未设**drillTo**，默认钻取到最上层也就是第一层，第一张子卡片按理说时间维度钻取到年。但因为其粒度的drillTo属性继承了全局metadataStructures中的月的drillTo=true，所以钻取到月。所以会显示某年某月某城市的月内污染情况分类统计。
```json
"detailRightPanel": {
"visible": true
},
"detailTopPanel": {
"percentInTotalVisible": true,
"type": "NXDetailVertical",
"visible": false
},
"detailTotalPanel": {
"isAboveDetailTop": true
}
上面的配置是右边滑动的数值指示器是可见的，顶上的数值指示器不可见，汇总值可见。 如果改成下面的配置则右边的指示器不可见，使用上面的观察数值。
"detailRightPanel": {
"visible": false
},
"detailTopPanel": {
"percentInTotalVisible": true,
"type": "NXDetailVertical",
"visible": false
},
"detailTotalPanel": {
"isAboveDetailTop": true
}
第二大卡片解析
第二张卡片中的粒度设定多了一个index值，默认index值是0，设定后会按粒度从小到大排序，排最后一个的会作会图形粒度。index相同的情况下按granularities里面数组的排列先后定顺序。
touchTools 卡片里加了2个触摸交互工具 ```json
{ "touchTools": [ { "crossAxis": "bottom", "enableMultiTouch": true, "removeOnRelease": false, "showBelowSeries": false, "targetSeries": [ "barSeries" ], "toolPlot": { "innerSymbol": { "anchorPoint": { "x": 0.5, "y": 0.5 }, "symbolSize": { "height": 10, "width": 10 }, "symbolType": "NXPlotSymbolTypeEllipse" }, "multiTouchLineType": "NXLineToolTypeVertical", "outerSymbol": { "anchorPoint": { "x": 0.5, "y": 0.5 }, "symbolFill": { "fillColor": "#ffffff" }, "symbolSize": { "height": 20, "width": 20 }, "symbolType": "NXPlotSymbolTypeEllipse" }, "singleTouchLineType": "NXLineToolTypeVertical" }, "toolType": "NXLineTool", "visible": true }, { "active": true, "crossAxis": "bottom", "targetSeries": [ "barSeries" ], "toolType": "NXChangeActiveSeriesTool" } ] }
```
第一个工具是NXLineTool线型指示，enableMultiTouch设成true后即可多指对比。toolPlot可指定线的风格粗细颜色与大小圆圈的形状样式。 第二个工具是NXChangeActiveSeriesTool，在多个series的情况下用来双击二下后进行系列的切换。如果去掉这个工具，将会一次性在指示器显示所有的，会比较多比较杂乱。
第三张第四张比较普通，在此略过。