- Created by wyn_writer on Mar 18, 2022
1. 内容概述
用于描述此组件的数据聚合等。
您可以像柱形图一样添加简单的数据绑定,也可以添加类似 KPI 矩阵中的复杂模板集合。如果使用模板集合的话,您可以添加多个数据绑定组。
2. interface
interface IDataBinding { dataRoles: Array<IDataRole | IDataRolesCollection>; templates?: IDataRoleTemplate[]; dataViewMappings?: IDataViewMappingConfig[]; conditions?: IDataRoleConditions; conversionRules?: IConversionRules; } interface IOption extends IIconable, ILocalizable { name: string; type: DataRoleOptionType | DataRoleTemplateOptionType; defaultValue?: any; } interface IItemOption extends IIconable, ILocalizable { name: string; type: DataRoleItemOptionType; defaultValue?: any; }
3. dataRoles
DataRoles定义可视化组件需要的数据字段。它对数据集中的字段进行分组,并有 dataViewMapping 使用。
一个 data role 就是一组数据集字段。以下为 data role 面板:
您可以为 data role 添加一些选项,当前支持枚举类型和数据格式。
下图是一种 data role 的选项菜单。 可以在 IDataRoleProfile 上访问选项数据。
您也可以向 Data role 模板添加一些选项。 当前仅支持枚举类型。
interface
enum DataRoleOptionType { Enum = 'enum', Format = 'format', DisplayUnit = 'displayUnit', } enum DataRoleItemOptionType { Enum = 'enum', Format = 'format', DisplayUnit = 'displayUnit', RenderSetting = 'renderSetting', } interface IEnumOptions extends IOption { items: Array<CommonDefNS.IEnumItem>; } interface IItemEnumOptions extends IItemOption { items: Array<CommonDefNS.IEnumItem>; } export enum DataRoleType { Value = 'value', Grouping = 'grouping', GroupingOrValue = 'groupingOrValue', Attribute = 'attribute', AttributeOrValue = 'attributeOrValue', } enum DatasetFieldDataType { date = 'date', datetime = 'datetime', number = 'number', string = 'string', boolean = 'boolean', } interface IDataRole extends CommonDefNS.ILocalizable { name: DataRoleName; aliasName: DataRoleName; kind: DataRoleType; options: IOption[]; itemOptions: IItemOption[]; hidden?: boolean; acceptedTypes?: DatasetFieldDataType[]; preferredKind?: DataRoleType; } interface IDataRolesCollection extends CommonDefNS.ILocalizable { kind: DataRoleType.DataRoleCollection; groups?: TemplateName[]; // init group templates collapsible?: boolean; editable?: boolean; }
dataRole
- name: data role 的名称
- aliasName:更改图标类型时使用,具有相同名称或别名的data roles 被视为相同。
- kind:
grouping:用于度量字段的分类或分组。
value:数值数据。
groupingOrValue:可用作度量也可以用作分组。
- options:将在data role 面板上呈现一个按钮。
- itemOptions: 为绑定的字段添加设置项,比如用于设置格式等。
- hidden: 如果为真,那么该 data role 将不会显示在数据绑定面板上,但是它仍然可以在dataviewmapping 中使用。
- preferredKind:仅当 kind 为 groupingOrValue 时生效。表示将添加到此处的字段首先视为一个值还是分组。
dataRoleCollection
- groups:Initially template instace最初的模板实例
collapsible:indicate dose this template support collapse.表示是否可折叠。
editable:表示此 data role 中的字段是否支持排序,添加或者编辑标题。
示例
{ "name": "Values", "kind": "value", "options": [ { "type": "format", "name": "valueFormat", "displayNameKey": "inspector.properties.charts.axis.dataFormat" }, { "displayNameKey": "actionBar.changeChartType", "name": "valueChartType", "type": "enum", "defaultValue": "column", "items": [ { "value": "line", "displayNameKey": "chartTypes.line" }, { "value": "column", "displayNameKey": "chartTypes.column" }, { "value": "area", "displayNameKey": "chartTypes.area" }, { "value": "stackedColumn", "displayNameKey": "chartTypes.stackedColumn" } ], } ], "itemOptions": [{ "name": "itemRenderSetting", "type": "renderSetting", "displayName": "Render Setting" },{ "name": "itemFormat", "type": "format", "displayName": "Edit Format..." }, { "name": "itemDisplayUnit", "type": "displayUnit", "displayName": "DisplayUnit" }, { "name": "itemEnum", "type": "enum", "displayName": "Enum", "items": [ { "value": 1, "displayName": "one" }, { "value": 2, "displayName": "two" }, { "value": 3, "displayName": "three" } ], "defaultValue": 1 }] }
4. templates
选择一个选项则可以将其添加到组里。
Interface
enum DataRoleTemplateOptionType { Enum = 'enum', } interface IDataRoleTemplate extends CommonDefNS.ILocalizable, CommonDefNS.IIconable { name: TemplateName; dataRoles?: IDataRole[]; dataViewMappings: IDataViewMappingConfig[]; conditions?: IDataRoleConditions; options?: IOption[]; } interface IDataRolesCollection extends CommonDefNS.ILocalizable { kind: DataRoleType.DataRoleCollection; groups?: TemplateName[]; // init group templates collapsible?: boolean; editable?: boolean; }
示例
{ "templates": [{ name: 'value', displayNameKey: 'dataBindingPanel.singleValue', dataRoles: [{ name: 'values', displayNameKey: 'dataBindingPanel.value', kind: 'value', }], dataViewMappings: [{ "single": { "value": "values" } }], conditions: [{ values: { max: 1 }, }], }], "dataRoles": [{ name: 'row', displayNameKey: 'dataBindingPanel.row', kind: 'grouping', }, { kind: 'collection', displayNameKey: 'dataBindingPanel.value', groups: ['value'], collapsible: true, editable: true }] }
5. dataViewMappings
定义数据角色即 data roles 之后,添加 data view mapping 则会将data role 映射到视图中。
Interface
interface IDataViewMapping { required?: IDataRoleConditions; } interface IDataView { single: ISingleDataView; plain: IPlainDataView; matrix: IMatrixDataView; } interface IDataRoleProfile { options: any; values: IPivotSettingProfile[]; } interface IPivotSettingProfile { display: string; name: string; method?: AggMethod; dataType: DataType; format: string; }
SingleDataView
interface ISingleDataViewMapping extends IDataViewMapping { value: DataRoleName; } interface ISingleDataView { value: number; profile: { [key as string]: IDataRoleProfile }; options: any; }
示例
{ "single": { "value": "values" } }
{ "value": 2610462, "profile": { "values": { "options": { "valueFormat": "$#,##0.00" }, "values": [ { "display": "Amount", "name": "Amount", "method": "sum", "dataType": "number", "format": "$#,##0.00" }] } }, "options": {} }
PlainDataView
interface IPlainDataViewMapping extends IDataViewMapping { dataRoles: DataRoleName[]; // default as all series?: DataRoleName; trellisRows?: DataRoleName; trellisColumns?: DataRoleName; } interface IPlainDataView { data: any[]; profile: { [ dataRoleName as string]: IDataRoleProfile }; sort: { [ columnDisplay as string] : { order: any[], priority: -1 | 0 | 1, // default | user-set | override }}; options: any; }
示例
{ "plain": { "required": [ { "values": { "min": 1 } }] } }
{ "sort": { "Product": { "order": [ "Spread", "Others", "InputMan", "Component One Studio", "Active Report" ], "priority": -1 }, "Department": { "order": [ "DTD1 ", "DTD2 ", "DTDx ", "DTD3 " ], "priority": -1 } }, "data": [ { "Department": "DTD1 ", "Product": "Spread", "Amount": 150220 }, { "Department": "DTD1 ", "Product": "Others", "Amount": 125874 }, { "Department": "DTD1 ", "Product": "InputMan", "Amount": 54473 }, { "Department": "DTD1 ", "Product": "Component One Studio", "Amount": 273315 }, { "Department": "DTD1 ", "Product": "Active Report", "Amount": 188682 }, { "Department": "DTD2 ", "Product": "Spread", "Amount": 217560 }, { "Department": "DTD2 ", "Product": "Others", "Amount": 155844 }, { "Department": "DTD2 ", "Product": "InputMan", "Amount": 75335 }, { "Department": "DTD2 ", "Product": "Component One Studio", "Amount": 426930 }, { "Department": "DTD2 ", "Product": "Active Report", "Amount": 262236 }, { "Department": "DTDx ", "Product": "Spread", "Amount": 49210 }, { "Department": "DTDx ", "Product": "Others", "Amount": 21978 }, { "Department": "DTDx ", "Product": "InputMan", "Amount": 12749 }, { "Department": "DTDx ", "Product": "Component One Studio", "Amount": 75810 }, { "Department": "DTDx ", "Product": "Active Report", "Amount": 36777 }, { "Department": "DTD3 ", "Product": "Spread", "Amount": 128205 }, { "Department": "DTD3 ", "Product": "Others", "Amount": 77922 }, { "Department": "DTD3 ", "Product": "InputMan", "Amount": 39406 }, { "Department": "DTD3 ", "Product": "Component One Studio", "Amount": 167580 }, { "Department": "DTD3 ", "Product": "Active Report", "Amount": 70356 } ], "profile": { "values": { "options": { "valueFormat": "$#,##0.00" }, "values": [ { "display": "Amount", "name": "Amount", "method": "sum", "dataType": "number", "format": "$#,##0.00" } ] }, "dimensions": { "options": {}, "values": [ { "display": "Department", "name": "Department", "dataType": "string", "format": "@" } ] }, "series": { "options": {}, "values": [ { "display": "Product", "name": "Product", "dataType": "string", "format": "@" } ] } }, "options": {} }
MatrixDataView
interface IMatrixDataViewMapping extends IDataViewMapping { values: DataRoleName[]; rows: DataRoleName[]; columns: DataRoleName[]; }
示例
{ "matrix": { "values": ["values"], "rows": ["dimensions"], "columns": ["series"] } }
{ "matrix": { "columns": { "levels": ["Product"], "headers": [ { "column": "Product", "label": "Spread", "next": [] }, { "column": "Product", "label": "Others", "next": [] }, { "column": "Product", "label": "InputMan", "next": [] }, { "column": "Product", "label": "Component One Studio", "next": [] }, { "column": "Product", "label": "Active Report", "next": [] } ], "sortPriority": -1 }, "rows": { "levels": ["Department"], "headers": [ { "column": "Department", "label": "DTD1 ", "next": [] }, { "column": "Department", "label": "DTD2 ", "next": [] }, { "column": "Department", "label": "DTDx ", "next": [] }, { "column": "Department", "label": "DTD3 ", "next": [] } ], "sortPriority": -1 }, "values": [ { "Department": "DTD1 ", "Product": "Spread", "Amount": 150220 }, { "Department": "DTD1 ", "Product": "Others", "Amount": 125874 }, { "Department": "DTD1 ", "Product": "InputMan", "Amount": 54473 }, { "Department": "DTD1 ", "Product": "Component One Studio", "Amount": 273315 }, { "Department": "DTD1 ", "Product": "Active Report", "Amount": 188682 }, { "Department": "DTD2 ", "Product": "Spread", "Amount": 217560 }, { "Department": "DTD2 ", "Product": "Others", "Amount": 155844 }, { "Department": "DTD2 ", "Product": "InputMan", "Amount": 75335 }, { "Department": "DTD2 ", "Product": "Component One Studio", "Amount": 426930 }, { "Department": "DTD2 ", "Product": "Active Report", "Amount": 262236 }, { "Department": "DTDx ", "Product": "Spread", "Amount": 49210 }, { "Department": "DTDx ", "Product": "Others", "Amount": 21978 }, { "Department": "DTDx ", "Product": "InputMan", "Amount": 12749 }, { "Department": "DTDx ", "Product": "Component One Studio", "Amount": 75810 }, { "Department": "DTDx ", "Product": "Active Report", "Amount": 36777 }, { "Department": "DTD3 ", "Product": "Spread", "Amount": 128205 }, { "Department": "DTD3 ", "Product": "Others", "Amount": 77922 }, { "Department": "DTD3 ", "Product": "InputMan", "Amount": 39406 }, { "Department": "DTD3 ", "Product": "Component One Studio", "Amount": 167580 }, { "Department": "DTD3 ", "Product": "Active Report", "Amount": 70356 } ] }, "profile": { "values": { "options": { "valueFormat": "$#,##0.00" }, "values": [ { "display": "Amount", "name": "Amount", "method": "sum", "dataType": "number", "format": "$#,##0.00", } ] }, "dimensions": { "options": {}, "values": [ { "display": "Department", "name": "Department", "dataType": "string", "format": "@" } ] }, "series": { "options": {}, "values": [ { "display": "Product", "name": "Product", "dataType": "string", "format": "@" } ] } }, "options": {} }
6. conditions
conditions 表示每个data role 绑定数据字段的数量限制。各 condition 之间是或的关系,也即 “or”;每个 condition 内部的 datarole 之间为“和” 的关系,也即“AND”。
[{ series: { max: 0 }, }, { series: { min: 1 }, values: { max: 1 }, }]
以上示例表示,当series 中没有字段时,对其他字段没有任何限制。当 series 中有一个或以上的字段时,那么在 values 中就只能绑定一个字段。
interface
interface IDataRoleCondition { [dataRoleName: string]: { max?: number; min?: number; }; }
7. conversionRules
图表切换规则。
interface
enum ConversionCommand { // All items in the source dataRole will be converted to target dataRole All = 'all', // The first item in the source dataRole will be converted to target dataRole First = 'first', // The last item in the source dataRole will be converted to target dataRole Last = 'last', } enum ConversionPhase { // The Rule will be executed before default rule Pre = 'pre', // The Rule will be executed after default rule Post = 'post' } interface IConversionRulesDetail { // Describes the rule will be executed before or after the default conversion rule. mode: ConversionPhase; // Only if conditions is null or the set conditions are matched, the rule will be executed. conditions?:Array<IDataRoleCondition>, // migrated related dataRole items from source visual to target execute: Array<{ // Describes the name or alias name of source visual dataRole name source: DataRoleName, // source data role // Describes the name or alias name of target visual dataRole name target: DataRoleName, // target data role // Describes what dataRole items of source visual will be converted. cmd: ConversionCommand, }>; } interface IConversionRules { // If the visual is target (convert to), these detailRules will be executed. in?: Array<IConversionRulesDetail>; // If the visual is source (convert from), these detailRules will be executed. out?: Array<IConversionRulesDetail>; }
规则
规则说明
- 尝试将相关的源可视化 dataRole 项目转换为目标可视化 dataRole。
- 查找将由 ruleDetails.execute.source 移动的源数据角色项
ruleDetails.source与dataRole的 name / aliasName相同 - 检查 ruleDetails.conditions
- 如果为空,则执行规则。
- 如果不为空并且条件匹配,则执行规则。
- 否则,该规则将不会执行。
- 执行 ruleDetails.execute 逐个转换。
将找到的源 dataRole 项目移动到目标组件的 dataRole,其 name 或 aliasName 与 ruleDetails.execute.target 相同。- ruleDetails.execute.cmd 是 ConversionCommand.All
将所有找到的源dataRole项目移动到目标dataRole - ruleDetails.execute.cmd 是 ConversionCommand.First
- 将所有找到的源 dataRole 项目的第一项移到目标 dataRole。
- 其他项目仍将保留在源datarole上。
- ruleDetails.execute..md 是 ConversionCommand.Last
- 将所有找到的源dataRole项的最后一项移动到目标dataRole。
- 其他项目仍将保留在源数据上。
- ruleDetails.execute.cmd 是 ConversionCommand.All
- 查找将由 ruleDetails.execute.source 移动的源数据角色项
- 用 conditions 设置条件,检查当前目标图表组件的数据绑定。
- 如果符合条件,则保持。
- 否则,回滚目标图表组件的数据绑定状态。
Rule Executed Order 规则执行顺序
- 在target.converionRules.in中执行ConversionPhase.Pre规则
在source.converionRules.out中执行ConversionPhase.Pre规则
执行默认转换规则
如果它们的dataRole名称/ aliasName相同,则将源dataRole项转换为目标。
在target.converionRules.in中执行ConversionPhase.Post规则
在source.converionRules.out中执行ConversionPhase.Post规则
处理源可视化组件中未转换的datarole
如果可以在目标中找到相关的dataRole,则将其余项移到其中并将每个项标记为无效。如果找不到,会将 dataRole 移至目标位置并将其标记为无效。
示例
柱状图组件 | 旭日图组件 |
---|---|
{ dataRoles:[ { name: 'values' }, { name: 'category' }, { name: 'series' }, { name: 'trellisColumns' }, { name: 'trellisRows' }, { name: 'conditionalFormatValues' } ], conditions: [{ series: { max: 0 }, }, { series: { min: 1 }, values: { max: 1 }, }], conversionRules: { out: [{ mode: 'post', execute: [{ source: 'category', target: 'trellisColumns', cmd: 'all', }], }, } | { dataRoles:[ { name: 'values' }, { name: 'details' }, { name: 'trellisColumns' }, { name: 'trellisRows' }, { name: 'conditionalFormatValues' } ], conditions: [{ values: { max: 1 }, }], conversionRules: { in: [{ mode: 'pre', execute: [{ source: 'category', target: 'details', cmd: 'all', }, { source: 'series', target: 'details', cmd: 'all', }, { source: 'location', target: 'details', cmd: 'all', }], }], out: [{ mode: 'post', conditions: [{ // means if target no 'category' dateRole, this rule will be executed category: null, }], execute: [{ source: 'details', target: 'series', cmd: 'all', }], }, { mode: 'post', execute: [{ source: 'details', target: 'series', cmd: 'last', }, { source: 'details', target: 'category', cmd: 'all', }], }], }, } |
用户场景1:将柱状图1转换为旭日图
step | 说明 | 柱状图数据绑定 | 旭日图数据绑定 |
---|---|---|---|
1 | 初始状态 | { values: { values: [{name: 'quantity'}], }, category: { values: [{name: 'department'}], }, series: { values: [{name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: []}, details: { values: [] }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
2 |
| { values: { values: [{name: 'quantity'}], }, category: { values: [{name: 'department'}], }, series: { values: [{name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: []}, details: { values: [] }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
2.1 |
| { values: { values: [{name: 'quantity'}], }, category: { values: [] }, series: { values: [{name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: []}, details: { values: [{name: 'department'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
2.2 |
| { values: { values: [{name: 'quantity'}], }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: []}, details: { values: [{name: 'department'}, {name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
3 |
| { values: { values: [{name: 'quantity'}], }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: []}, details: { values: [{name: 'department'}, {name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
4 | 执行默认的转换规则
| { values: { values: [ ] }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [{name: 'quantity'}] }, details: { values: [{name: 'department'}, {name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
5 | 柱状图中没有多余的datarole,转换完成。 |
用户场景2:将柱状图2转换为旭日图
step | 说明 | 柱状图的数据绑定 | 旭日图的数据绑定 |
---|---|---|---|
1 | 初始状态 | { values: { values: [{name: 'quantity'}, {name: 'price'}] }, details: { values: [{name: 'department'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [ ] }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
2 | 找出目标图表,即旭日图的“pre” “in” 规则。 [{ mode: 'pre', execute: [{ source: 'category', target: 'details', cmd: 'all', }, { source: 'series', target: 'details', cmd: 'all', }, { source: 'location', target: 'details', cmd: 'all', }, }] | { values: { values: [{name: 'quantity'}, {name: 'price'}] }, details: { values: [{name: 'department'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [ ] }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
2.1 |
conditions: [{ values: { max: 1 }, }], | { values: { values: [{name: 'quantity'},{name: 'price'}] }, details: { values: [] }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [ ] }, category: { values: [{name: 'department'}] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
3 |
| { values: { values: [{name: 'quantity'}, {name: 'price'}] }, details: { values: [] }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [ ] }, category: { values: [{name: 'department'}] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
4 | 执行默认的转换规则。 | { values: { values: [{name: 'quantity'},{name: 'price'}] }, details: { values: [] }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [ ] }, category: { values: [{name: 'department'}] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
4.1 |
| { values: { values: [{name: 'price'}] }, details: { values: [] }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [{name: 'quantity'}] }, category: { values: [{name: 'department'}] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
5 |
| { values: { values: [{name: 'price'}] }, details: { values: [] }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [{name: 'quantity'}] }, category: { values: [{name: 'department'}] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
6 |
| { values: { values: [{name: 'price'}] }, details: { values: [] }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [{name: 'quantity'}] }, category: { values: [{name: 'department'}] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
7 | 处理源可视化组件中未转换的datarole 项目: 将柱状图剩余的“values” 项目移动到旭日图,并标记为无效。 | { values: {values: [ ] }, details: { values: [] }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [ { name: 'quantity' }, { name: 'privce', invalid: true } ] }, category: { values: [{name: 'department'}] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
用户场景3: 将旭日图转换为柱状图
step | 说明 | 柱状图的数据绑定 | 旭日图的数据绑定 |
---|---|---|---|
1 | 初始状态 | { values: { values: [{name: 'quantity'}] }, details: { values: [{name: 'department'}, {name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [ ] }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
2 |
| { values: { values: [{name: 'quantity'}] }, details: { values: [{name: 'department'}, {name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [ ] }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
3 |
| { values: { values: [{name: 'quantity'}] }, details: { values: [{name: 'department'}, {name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [ ] }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
4 | 执行默认的转换规则
| { values: { values: [ ]}, details: { values: [{name: 'department'}, {name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [{name: 'quantity'}], }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
5 | 查找柱状图的 ‘post’ ‘in’ 规则。
| { values: { values: [ ]}, details: { values: [{name: 'department'}, {name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [{name: 'quantity'}], }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
6 | 查找旭日图的 ‘post’ ‘out’规则。 [{ mode: 'post', conditions: [{ // means if target no 'category' dateRole, this rule will be executed category: null, }], execute: [{ source: 'details', target: 'series', cmd: 'all', }], }, { mode: 'post', execute: [{ source: 'details', target: 'series', cmd: 'last', }, { source: 'details', target: 'category', cmd: 'all', }], }]
[{ mode: 'post', execute: [{ source: 'details', target: 'series', cmd: 'last', }, { source: 'details', target: 'category', cmd: 'all', }], }] | { values: { values: [ ]}, details: { values: [{name: 'department'}, {name: 'payment'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [{name: 'quantity'}], }, category: { values: [ ] }, series: { values: [] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
6.1 |
| { values: { values: [ ]}, details: { values: [{name: 'department'}], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [{name: 'quantity'}], }, category: { values: [ ] }, series: { values: [{name: 'payment'}] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
6.2 |
| { values: { values: [ ]}, details: { values: [], }, trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } | { values: { values: [{name: 'quantity'}], }, category: { values: [{name: 'department'}] }, series: { values: [{name: 'payment'}] } trellisColumns: { values: [] }, trellisRows: { values: [] }, conditionalFormatValues: { values: [] }, } |
7 | 旭日图中没有剩余的 datarole 剩余项目,转换完成。 |
定义完data role之后,添加date view mapping 就可以在数据视图中映射这些data role。
- No labels