การกำหนดค่าการแสดงภาพจะกำหนดข้อมูลและแอตทริบิวต์รูปแบบที่ การแสดงข้อมูลผ่านภาพ
การกำหนดค่าควรเป็นไฟล์ JSON ที่มีโครงสร้างต่อไปนี้
{
  "data": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(DataElement),
      "id": string,
      "label": string,
      "options": object(DataElementOptions)
    }]
  }],
  "style": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(StyleElement),
      "id": string,
      "label": string,
      "defaultValue": string | object
    }]
  }],
  "interactions": [{
    "id": string,
    "supportedActions": array(enum(InteractionType))
  }],
  "features": {
   "enableComparisonDateRange": boolean
  }
}
| ชื่อช่อง | ประเภท | คำอธิบาย | 
|---|---|---|
| data[] | Array(object) | การกำหนดค่าข้อมูลของการแสดงภาพ การกำหนดค่านี้จะส่งผลต่อแผงข้อมูลของแผงคุณสมบัติ | 
| data[].id | string | รหัสของส่วนข้อมูล ต้องเป็นสตริงที่ไม่ว่างเปล่าและไม่มีการเว้นวรรค | 
| data[].label | string | ป้ายกำกับสำหรับส่วนข้อมูล | 
| data[].elements[] | string | องค์ประกอบข้อมูลที่จะแสดงผล | 
| data[].elements[].type | stringenum(DataElement) | ประเภทองค์ประกอบข้อมูลที่จะแสดง | 
| data[].elements[].id | string | รหัสขององค์ประกอบข้อมูล ต้องเป็นสตริงที่ไม่ว่างเปล่าและไม่มีการเว้นวรรค | 
| data[].elements[].label | string | ป้ายกำกับเคล็ดลับเครื่องมือสำหรับองค์ประกอบข้อมูล | 
| data[].elements[].options | object(DataElementOptions) | ตัวเลือกข้อมูลสำหรับองค์ประกอบ ซึ่งขึ้นอยู่กับประเภทองค์ประกอบของข้อมูล | 
| style[] | Array(object) | การกำหนดค่ารูปแบบที่การแสดงภาพต้องการ การกำหนดค่านี้จะส่งผลต่อแผงรูปแบบของแผงคุณสมบัติ ออบเจ็กต์แต่ละรายการในอาร์เรย์จะแสดงองค์ประกอบรูปแบบที่ต้องการแสดงผล ลำดับขององค์ประกอบจะเป็นตัวกำหนดลำดับที่จะแสดง | 
| style[].id | string | รหัสของส่วนรูปแบบ ต้องเป็นสตริงที่ไม่ว่างเปล่าและไม่มีการเว้นวรรค | 
| style[].label | string | ป้ายกำกับสำหรับส่วนรูปแบบ | 
| style[].elements | Array(object) | องค์ประกอบของรูปแบบที่จะแสดงผล | 
| style[].elements[].id | string | รหัสขององค์ประกอบรูปแบบ สตริงนี้ต้องไม่ว่างเปล่าโดยไม่มีการเว้นวรรค | 
| style[].elements[].type | stringenum(StyleElement) | ประเภทองค์ประกอบของรูปแบบ เช่น ตัวเลือกแบบอักษร | 
| style[].elements[].label | string | เคล็ดลับเครื่องมือหรือป้ายกำกับสำหรับองค์ประกอบของรูปแบบ นี่คือข้อความป้ายกำกับสำหรับองค์ประกอบช่องทำเครื่องหมาย และข้อความเคล็ดลับเครื่องมือสำหรับองค์ประกอบประเภทอื่นๆ | 
| style[].elements[].options | Array(object) | optionsสำหรับองค์ประกอบ ใช้ได้เฉพาะกับประเภทองค์ประกอบของรูปแบบSELECT_SINGLEและSELECT_RADIO | 
| style[].elements[].defaultValue | string OR object | ค่าเริ่มต้นสำหรับองค์ประกอบของรูปแบบ ระบบจะไม่สนใจค่าที่ไม่ถูกต้อง* | 
| interactions[] | Array(object) | การกำหนดค่าการโต้ตอบของการแสดงภาพ การกําหนดค่านี้จะกําหนดว่าสามารถทําหน้าที่เป็นตัวกรองได้หรือไม่ | 
| interactions[].id | string | รหัสขององค์ประกอบการโต้ตอบ ต้องเป็นสตริงที่ไม่ว่างเปล่าและไม่มีการเว้นวรรค | 
| interactions[].supportedActions | Array(InteractionType) | การโต้ตอบที่เป็นไปได้ที่รองรับ | 
| features | object | ฟีเจอร์ที่คุณต้องการเปิดหรือปิดใช้ในการแสดงภาพ | 
| features.enableComparisonDateRange | boolean | เปิดใช้ช่วงวันที่การเปรียบเทียบ ค่าเริ่มต้นจะเป็น falseหากไม่ระบุ | 
*defaultValue เป็นสตริงในทุกอย่าง ยกเว้นตัวเลือกสี สำหรับ
สี defaultValue ควรเป็นวัตถุตามรูปแบบ:
{
    color: `string`
}
DataElement
ค่าสำหรับองค์ประกอบข้อมูลอาจเป็นค่าใดค่าหนึ่งต่อไปนี้
| ค่า enum | คำอธิบาย | 
|---|---|
| เมตริก | แสดงผลองค์ประกอบช่องเมตริก | 
| DIMENSION | แสดงผลองค์ประกอบช่องมิติข้อมูล | 
| MAX_RESULTS | กำหนดแถวสูงสุดของข้อมูลที่ขอได้ด้วยการสร้างภาพเสมือนนี้ | 
ตัวเลือก DataElement
ค่าสำหรับองค์ประกอบข้อมูลอาจเป็นค่าใดค่าหนึ่งต่อไปนี้
| ค่า enum | ประเภทตัวเลือก | มีตัวเลือก | 
|---|---|---|
| เมตริก | ออบเจ็กต์ | max: number - จำนวนเมตริกสูงสุด นาที: ตัวเลข - จำนวนขั้นต่ำของเมตริกที่กำหนด | 
| DIMENSION | ออบเจ็กต์ | max: number - จำนวนมิติข้อมูลสูงสุดที่รองรับ นาที: ตัวเลข - จำนวนขั้นต่ำของมิติข้อมูลที่กำหนด supportedTypes: รายการประเภทที่รองรับ supportedTypesอาจรวมTIME,GEOหรือDEFAULT | 
| MAX_RESULTS | ออบเจ็กต์ | max: number - จำนวนแถวสูงสุดที่การแสดงผลขอได้ ค่าเริ่มต้น: 2500 | 
StyleElement
ค่าสำหรับองค์ประกอบของรูปแบบอาจเป็นค่าใดค่าหนึ่งต่อไปนี้
| ค่า enum | คำอธิบาย | ประเภทข้อมูล defaultValue(การกำหนดค่า) | ประเภทข้อมูล value(ข้อความ) | ค่าเริ่มต้น | 
|---|---|---|---|---|
| FONT_COLOR | แสดงตัวเลือกสีแบบอักษร ค่าที่ถูกต้องคือรหัสสีแบบเลขฐาน 16 | STRING|OBJECT<Color> | STRING|OBJECT<Color> | กำหนดตามธีม | 
| FONT_SIZE | แสดงผลตัวเลือกขนาดแบบอักษร ค่าพิกเซลที่ใช้ได้คือ 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 30, 32, 36, 40, 44, 48, 60, 72, 84, 96 | NUMBER | NUMBER | 12 | 
| FONT_FAMILY | แสดงผลตัวเลือกชุดแบบอักษร ค่าที่ใช้ได้คือแบบอักษร ดัง ดัง ดัง ดัง พอใจ คืโ อ บู | STRING | STRING | กำหนดตามธีม | 
| CHECKBOX | แสดงผลช่องทำเครื่องหมาย | BOOLEAN | BOOLEAN | false | 
| TEXTINPUT | แสดงผลกล่องป้อนข้อความ | STRING | STRING | "" | 
| TEXTAREA | แสดงพื้นที่ป้อนข้อความขนาดใหญ่ | STRING | STRING | "" | 
| SELECT_SINGLE | แสดงเมนูแบบเลื่อนลงซึ่งมีค่าที่กำหนดไว้ล่วงหน้า | STRING(สำหรับ defaultValue และ options.label และ options.value) | STRING | ไม่ได้กำหนด | 
| SELECT_RADIO | แสดงผลตัวเลือกวิทยุที่มีค่าที่กำหนดล่วงหน้า | STRING(สำหรับ defaultValue และ options.label และ options.value) | STRING | ไม่ได้กำหนด | 
| FILL_COLOR | แสดงผลตัวเลือกสีเติม ค่าที่ถูกต้องคือรหัสสีแบบเลขฐาน 16 | STRING|OBJECT<Color> | OBJECT<Color> | กำหนดตามธีม | 
| BORDER_COLOR | แสดงตัวเลือกสีเส้นขอบ ค่าที่ถูกต้องคือรหัสสีแบบเลขฐาน 16 | STRING|OBJECT<Color> | OBJECT<Color> | กำหนดตามธีม | 
| AXIS_COLOR | แสดงตัวเลือกสีแกน ค่าที่ถูกต้องคือรหัสสีแบบเลขฐาน 16 | STRING|OBJECT<Color> | OBJECT<Color> | กำหนดตามธีม | 
| GRID_COLOR | แสดงผลตัวเลือกสีของตารางกริด ค่าที่ถูกต้องคือรหัสสีแบบเลขฐาน 16 | STRING|OBJECT<Color> | OBJECT<Color> | กำหนดตามธีม | 
| ความทึบแสง | แสดงผลตัวเลือกความทึบแสง หน่วยคือ % ค่าที่ใช้ได้จะต้องอยู่ระหว่าง 0 ถึง 1 โดยเพิ่มครั้งละ 0.1 | NUMBER | NUMBER | 1 | 
| LINE_WEIGHT | แสดงเครื่องมือเลือกน้ำหนักเส้น ค่าที่ใช้ได้คือตั้งแต่ 0 ถึง 5 0 จะแสดงผลเป็น "ไม่มี" ในเมนูแบบเลื่อนลง | NUMBER | NUMBER | |
| LINE_STYLE | แสดงเครื่องมือเลือกรูปแบบของเส้น ค่าเริ่มต้นที่ยอมรับ: solid,dashed,dotted,double | STRING | STRING | "solid" | 
| BORDER_RADIUS | แสดงตัวเลือกรัศมีเส้นขอบ ค่าที่ใช้ได้มีดังนี้ 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 | NUMBER | NUMBER | กำหนดตามธีม | 
| ช่วงการฝึก | แสดงผลตัวเลือกช่วงเวลา ค่าเป็นจำนวนเต็ม | NUMBER | NUMBER | 0 | 
องค์ประกอบรูปแบบจะกำหนดค่าไอคอนที่แสดงในแท็บ Style ของพร็อพเพอร์ตี้
แผง
ตัวเลือกองค์ประกอบของรูปแบบ
ตัวเลือกการสนับสนุนองค์ประกอบรูปแบบบางอย่าง
options: array(options)
| ค่า enum | ออบเจ็กต์ตัวเลือก | 
|---|---|
| SELECT_SINGLE | { label: `string`, value: `string` } | 
| SELECT_RADIO | { label: `string`, value: `string` } | 
| ช่วงการฝึก | { max: `number`, min: `number` } | 
ประเภทข้อมูล
วัตถุ<สี>
{
  color: STRING<Color>,
  opacity: NUMBER<Opacity>
}
STRING<Color>
ค่าสตริงที่มีรหัสสีแบบเลขฐาน 16
ตัวอย่าง
"color": "#0000ff"
NUMBER<ความทึบแสง>
ค่าตัวเลขตั้งแต่ 0 ถึง 1 โดยเพิ่มได้ทีละ 0.10
ตัวอย่าง
"opacity": 0.2
InteractionType
InteractionTypes จะกำหนดค่าตัวเลือกการโต้ตอบที่มีอยู่ในสไตล์ Data
ของแผงคุณสมบัติ ปัจจุบันรองรับ "FILTER" เท่านั้น
| ค่า enum | คำอธิบาย | 
|---|---|
| "FILTER" | อนุญาตให้ผู้ใช้ใช้การแสดงข้อมูลผ่านภาพเป็นตัวกรอง | 
ตัวอย่างการกำหนดค่า
{
  "data": [{
    "id": "concepts",
    "label": "concepts",
    "elements": [
      {
        "id": "dimension1",
        "label": "first dimension",
        "type": "DIMENSION",
        "options": {
          "min": 1,
          "max": 3,
          "supportedTypes": ["DEFAULT"]
        }
      },
      {
        "id": "metric",
        "label": "metric",
        "type": "METRIC",
        "options": {
          "min": 1,
          "max": 3
        }
      }
    ]
  }],
  "style": [
    {
      "id": "colors",
      "label": "Highlight Colors",
      "elements": [
        {
          "id": "accentColor",
          "label": "Accent Color",
          "type": "SELECT_SINGLE",
          "defaultValue": "rain",
          "options": [
            {
              "label": "Summer",
              "value": "summer"
            },
            {
              "label": "Fall",
              "value": "fall"
            }
          ]
        },
        {
          "id": "reverseColor",
          "label": "Show reverse color",
          "defaultValue": false,
          "type": "CHECKBOX"
        },
        {
          "id": "fillColor",
          "label": "Fill Color",
          "defaultValue": {
            "color": "#0000ff"
          },
          "type": "FILL_COLOR"
        },
        {
          "id": "textOpacity",
          "label": "Text Opacity",
          "defaultValue": 0.2,
          "type": "OPACITY"
        },
        {
          "id": "customText",
          "label": "Custom Text",
          "defaultValue": "0.2",
          "type": "TEXTINPUT"
        }
      ]
    },
    {
      "id": "text",
      "label": "Highlight Text",
      "elements": [
        {
          "id": "textFontSize",
          "label": "Font size",
          "defaultValue": 10,
          "type": "FONT_SIZE"
        },
        {
          "id": "font",
          "label": "Font family",
          "defaultValue": "Arial",
          "type": "FONT_FAMILY"
        }
      ]
    }
  ],
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ],
  "features": {
    "enableComparisonDateRange": false
  }
}