การกำหนดค่าการแสดงภาพจะกำหนดข้อมูลและแอตทริบิวต์รูปแบบที่ การแสดงข้อมูลผ่านภาพ
การกำหนดค่าควรเป็นไฟล์ 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 |
string enum(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 |
string enum(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
}
}