[]
        
在线Demo 免费试用
(Showing Draft Content)

Data Binding

1. 概述

1.1 功能概述

本节为您介绍DataBingingDataBinging用于描述此组件的数据聚合等。您可以像柱形图一样添加简单的数据绑定,也可以添加类似 KPI 矩阵中的复杂模板集合。如果使用模板集合的话,您可以添加多个数据绑定组。

2. 接口介绍

2.1 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;
}

2.2 dataRoles

  1. DataRoles定义可视化组件需要的数据字段。它对数据集中的字段进行分组,并由 dataViewMapping使用。一个 data role 就是一组数据集字段。

  • 以下为 data role 面板:

    image2020-5-29_17-56-40.png

  • 您可以为 data role 添加一些选项,当前支持枚举类型、数据格式和数据单位。

    image2020-5-29_17-58-29.png

  • 下图是一种 data role 的选项菜单。 可以在 IDataRoleProfile 上访问选项数据。您也可以向 Data role 模板添加一些选项。 当前仅支持枚举类型。

    image2020-5-29_18-16-2.png

2.2.1 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

    • namedata role 的名称

    • aliasName:更改图标类型时使用,具有相同名称或别名的data roles 被视为相同。

    • kind

      • grouping:用于度量字段的分类或分组。

      • value:度量值。

      • groupingOrValue:可用作度量也可以用作分组。

      • attribute:字段被分组后的第一个值。

      • attributeOrValue:作为属性或度量值。

    • options:将在data role 面板上呈现一个按钮。

    • itemOptions: 为绑定的字段添加设置项,比如用于设置格式等。

    • hidden: 如果为真,那么该 data role 将不会显示在数据绑定面板上,但是它仍然可以在dataviewmapping 中使用。

    • preferredKind:仅当 kindgroupingOrValueattributeOrValue 时生效。表示将添加到此处的字段首先视为一个值还是分组。

  • dataRoleCollection

    • groupsInitially template instace最初的模板实例

    • collapsibleindicate 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
        }]
    }

2.3 templates

选择一个选项则可以将其添加到组里。

image2020-6-1_11-14-11.png

2.3.1 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
        }]
    }

2.4 dataViewMappings

定义数据角色即 data roles 之后,添加data view mapping 则会将data role 映射到视图中。

2.4.1 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;
}

2.4.2 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":
        {}
    }

2.4.3 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": {}
       }

2.4.4 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": {}
    }

2.5 conditions

conditions 表示每个data role 绑定数据字段的数量限制。各condition 之间是或的关系,也即 “or”;每个 condition 内部的 datarole 之间为“和” 的关系,也即“AND”。

[{
    series: { max: 0 },
  }, {
    series: { min: 1 },
    values: { max: 1 },
}]

以上示例表示,当series 中没有字段时,对其他字段没有任何限制。当 series 中有一个或以上的字段时,那么在 values 中就只能绑定一个字段。

2.5.1 interface

interface IDataRoleCondition {
    [dataRoleName: string]: {
      max?: number;
      min?: number;
    };
}

2.6 conversionRules

代表图表切换规则。

2.6.1 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>;
}

2.6.2 规则

2.6.2.1 规则说明

  1. 尝试将相关的源可视化 dataRole 项目转换为目标可视化 dataRole。

    1. 查找将由 ruleDetails.execute.source 移动的源数据角色项ruleDetails.source与dataRole的 name / aliasName相同

    2. 检查 ruleDetails.conditions

      1. 如果为空,则执行规则。

      2. 如果不为空并且条件匹配,则执行规则。

      3. 否则,该规则将不会执行。

    3. 执行 ruleDetails.execute 逐个转换。将找到的源 dataRole 项目移动到目标组件的 dataRole,其 name 或 aliasName 与 ruleDetails.execute.target 相同。

      1. ruleDetails.execute.cmd 是 ConversionCommand.All将所有找到的源dataRole项目移动到目标dataRole

      2. ruleDetails.execute.cmd 是 ConversionCommand.First

        1. 将所有找到的源 dataRole 项目的第一项移到目标 dataRole。

        2. 其他项目仍将保留在源datarole上。

      3. ruleDetails.execute.md 是 ConversionCommand.Last

        1. 将所有找到的源dataRole项的最后一项移动到目标dataRole。

        2. 其他项目仍将保留在源数据上。

  2. 用 conditions 设置条件,检查当前目标图表组件的数据绑定。

    1. 如果符合条件,则保持。

    2. 否则,回滚目标图表组件的数据绑定状态。

2.6.2.2 Rule Executed Order 规则执行顺序

  1. target.converionRules.in 中执行 ConversionPhase.Pre 规则

  2. source.converionRules.out 中执行 ConversionPhase.Pre 规则

  3. 执行默认转换规则

    如果它们的dataRole名称/ aliasName相同,则将源dataRole项转换为目标。

  4. target.converionRules.in 中执行 ConversionPhase.Post规则

  5. source.converionRules.out 中执行ConversionPhase.Post规则

  6. 处理源可视化组件中未转换的datarole

    如果可以在目标中找到相关的dataRole,则将其余项移到其中并将每个项标记为无效。

    如果找不到,会将 dataRole 移至目标位置并将其标记为无效。

2.6.2.3 示例

柱状图组件

旭日图组件

{

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:将柱状图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

    - 找出目标图表,即旭日图的“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'}],

    },

    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

    - 将柱状图的“category” datarole 中的所有项目转化到旭日图的“details” 中。

    - 旭日图的dataroles 与 conditions 设定的条件相符,因此保持状态。

    conditions: [{

    values: { max: 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

    - 将柱状图“series”dataRole的所有项目移动到旭日图的“details”中。

    - 旭日图的 dataroles 与其 conditions 条件设置匹配,因此保持状态

    {

    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

    - 找出柱状图组件的“pre” “out” 规则。

    - 发现并没有相关的规则,因此不需要额外做调整。

    {

    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”中;

    - 旭日图的dataroles 与 它的conditions 条件设置匹配,因此保持状态。

    {

    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:将柱状图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

    - 将柱状图的“category” datarole 中的所有醒目都移至 旭日图的“details” datarole 中。

    - 旭日图的datarole 满足 condition 中的条件设定,因此保持状态。

    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

    - 找出柱状图的“pre” “out” 规则。

    - 发现没有相关的规则,因此无需做额外的更改。

    {

    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” datarole 中的所有项目移动到旭日图的“values”中。

    - 旭日图的dataroles 不匹配 condition 中的设定。

    - 因此移动“values”中的第一个项目,其他的项目不移动。

    conditions: [{

    values: { max: 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

    - 查看旭日图的‘ post’ ‘in’ 规则。

    - 发现并没有相关规则,因此无需做额外操作。

    {

    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

    - 查看旭日图的‘ post’ ‘out’ 规则。

    - 发现并没有相关规则,因此无需做额外操作。

    {

    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. 用户场景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

    - 查找柱状图的 ‘pre’ ‘in’规则

    - 发现没有相关规则,因此无需操作。

    {

    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

    - 查看旭日图的 ‘ pre’ ‘out’ 规则。

    - 发现没有相关规则,因此无需操作。

    {

    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”。

    - 柱状图的dataroles 与conditions 条件设定匹配,因此保持当前状态。

    conditions: [{

    series: { max: 0 },

    }, {

    series: { min: 1 },

    values: { max: 1 },

    }],

    {

    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',

    }],

    }]

    - 因为柱状图中有“category” datarole,因此有效的规则是

    [{

    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

    - 将旭日图的“details” datarole的 “last” 项目移动到柱状图的“series” 中。

    - 柱状图的dataroles 与 condition 条件设定匹配,因此保持状态即可。

    {

    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

    - 将旭日图的“details” datarole 中剩余的项目移动到柱状图的“category”中。

    - 柱状图的dataroles 与 condition 条件设定匹配,因此保持状态即可。

    {

    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 剩余项目,转换完成。