社区可视化图表 postMessage 参考

本页介绍了数据洞察向 iframe 提供的 postMessagedata 属性。

postMessage.data 对象参考

{
      type: string,
      config: object,
      fields: Array(field),
      dataResponse: object
    }

    
字段 类型 说明
type string 消息的类型。目前始终是字符串 RENDER
config object 一个将配置中定义的字段与值相关联的对象。
fields Array(field) field 对象的数组。
dataResponse object 一个包含 tables 的对象

config 对象

{
      data: Array(dataSection),
      style: Array(styleSection),
      themeStyle: object

    }
    
字段 类型 说明
data Array(dataSection) dataSection 对象的数组。
style Array(styleSection) styleSection 对象的数组。
themeStyle object 一个对象

dataSection 对象

{
      id: string,
      label: string,
      elements: Array(dataField)
    }
    
字段 类型 说明
id string 开发者在配置中定义的部分 ID
label string 开发者在配置中定义的部分标签
elements Array(dataField) dataFields 的数组

dataField 对象

{
      type: enum(DataElement),
      id: string,
      label: string,
      options: object(dataElementOptions),
      value: array(string)
    }
    
字段 类型 说明
type enum(DataElement) DataField 的类型:"DIMENSION""METRIC""MAX_RESULTS"
id string 开发者在配置中定义的字段 ID
label string 开发者在配置中定义的字段标签
options object(dataElementOptions) 与此字段的 dataElement 类型对应的选项
values Array(string) 与最终用户选择的数据对应的字段 ID 的数组

styleSection 对象

{
      id: string,
      label: string,
      elements: array(styleField)
    }
    
字段 类型 说明
id string 开发者在配置中定义的部分 ID
label string 开发者在配置中定义的部分标签
elements Array(styleField) styleField 的数组

styleField 对象

{
      type: enum(StyleElement),
      id: string,
      label: string,
      defaultValue: string | number | boolean,
      value: string
    }
    
字段 类型 说明
type enum(StyleElement) StyleField 的类型。
id string 开发者在配置中定义的字段 ID
label string 开发者在配置中定义的字段标签
defaultValue string 开发者在配置中定义的此样式的默认值
value string defaultValue 或最终用户选择的样式值

styleElement 枚举是开发者在可视化图表配置中定义的值。可能的值可在配置参考中找到。

themeStyle 对象

{
      fillColor: {
        color: string,
        opacity: number
      },
      fontColor: {
        color: string,
        opacity: number
      },
      accentFillColor: {
        color: string,
        opacity: number
      },
      accentFontColor: {
        color: string,
        opacity: number
      },
      fontFamily: string,
      accentFontFamily: string,
      increaseColor: {
        color: string,
        opacity: number
      },
      decreaseColor: {
        color: string,
        opacity: number
      },
      gridColor: {
        color: string,
        opacity: number
      },
      seriesColor: [
        {
          color: string,
          opacity: number
        }
      ]
    }
    
字段 类型 说明
fillColor object 一个格式为 {color: string, opacity: number} 的对象
fontColor object 一个格式为 {color: string, opacity: number} 的对象
accentFillColor object 一个格式为 {color: string, opacity: number} 的对象
accentFontColor object 一个格式为 {color: string, opacity: number} 的对象
fontFamily string 一个描述字体系列的字符串
accentFontFamily string 一个描述强调字体系列的字符串
increaseColor object 一个格式为 {color: string, opacity: number} 的对象
decreaseColor object 一个格式为 {color: string, opacity: number} 的对象
gridColor object 一个格式为 {color: string, opacity: number} 的对象
seriesColor Array(object) 格式为 {color: string, opacity: number} 的对象的数组

field 对象

{
      id: string,
      name: string,
      description: string,
      type: enum(semanticType)
    }
    
字段 类型 说明
id string 数据洞察生成的数据字段的 ID
name string 字段的名称
description string 字段说明
type enum(semanticType) 字段的 semanticType

dataResponse 对象

{
      tables: `array(table)`
    }
    
字段 类型 说明
tables array(table) 数据表格的数组

table 对象

{
      id: string
      fields: Array(string),
      rows: Array(Array(string | bool | int))

    }
    
字段 类型 说明
id enum(TableType) 表格类型
fields Array(string) fieldIds 的数组
rows Array(Array(string OR bool OR int)) 数据行数组的数组

TableType 的值可以是以下任一值:

枚举值 说明
"DEFAULT" 与“DIMENSION”对应的 dataField 类型
"COMPARISON" 标识对照表

postMessage 示例

{
      config: {
        data: [
          {
            id: "dimension",
            label: "Dimension",
            elements: [
              {
                "id": "dimension1",
                "label": "first dimension",
                "type": "DIMENSION",
                "options": {
                  "min": 1,
                  "max": 2
                },
                fields: ["qt_1234", "qt_4321"]
              },
            ],
          },
          {
            id: "metric",
            label: "Metric",
            elements: [
              {
                type: "METRIC",
                id: "metSelector",
                label: "Metric X",
                options: {
                  min: 1,
                  max: 1
                },
                fields: ["qt_6789"]
              }
            ]
          }
        ],
        style: [
          {
            id: "tableHeaderSection",
            label: "Table Header",
            elements: [
              {
                type: "FONT_COLOR",
                id: "fontColor1",
                label: "Table header font color",
                defaultValue: "#888888",
                value: "#cccccc"
              }
            ]
          }
        ],
        themeStyle: {
          <themeStyle properties - see table above.>
        }
      },
      fields: [
        {
          id: "qt_1234",
          name: "Source",
          description: "The source.",
          type: "TEXT"
        },
        {
          id: "qt_4321",
          name: "Country",
          description: "The country.",
          type: "COUNTRY"
        },
        {
          id: "qt_6789",
          name: "Sessions",
          description: "Number of sessions.",
          type: "NUMBER"
        }
      ],
      dataResponse: {
        tables: [
          {
            id: "DEFAULT",
            fields: ["qt_1234", "qt_4321", "qt_6789"],
            rows: [
              ["google", "Canada", 324234],
              ["google images", "USA", 5345]
            ]
          },
          {
            id: "COMPARISON",
            fields: ["qt_1234", "qt_4321", "qt_6789"],
            rows: [
              ["google", "Canada", 343434],
              ["google images", "USA", 6645]
            ]
          }
        ]
      }
    }