Cấu hình của hình ảnh trực quan hoá xác định các thuộc tính dữ liệu và kiểu cần thiết cho hình ảnh trực quan.
Cấu hình dự kiến dưới dạng tệp JSON có cấu trúc như sau:
{
"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
}
}
Tên trường | Loại | Nội dung mô tả |
---|---|---|
data[] |
Array(object) |
Cấu hình dữ liệu của hình ảnh trực quan. Cấu hình này ảnh hưởng đến ngăn Dữ liệu của bảng điều khiển thuộc tính. |
data[].id |
string |
Mã của phần dữ liệu. Đây phải là một chuỗi không trống và không có dấu cách. |
data[].label |
string |
Nhãn cho phần dữ liệu. |
data[].elements[] |
string |
Các phần tử dữ liệu cần kết xuất. |
data[].elements[].type |
string enum(DataElement) |
Loại phần tử dữ liệu cần kết xuất. |
data[].elements[].id |
string |
Mã của phần tử dữ liệu. Đây phải là một chuỗi không trống và không có dấu cách. |
data[].elements[].label |
string |
Nhãn chú giải công cụ cho phần tử dữ liệu. |
data[].elements[].options |
object(DataElementOptions) |
Các tuỳ chọn dữ liệu cho phần tử. Điều này phụ thuộc vào Loại phần tử dữ liệu. |
style[] |
Array(object) |
Cấu hình kiểu yêu cầu của hình ảnh trực quan. Cấu hình này ảnh hưởng đến ngăn Kiểu của bảng thuộc tính. Mỗi đối tượng trong mảng đại diện cho một phần tử kiểu để hiển thị. Thứ tự của các phần tử xác định thứ tự hiển thị của các phần tử đó. |
style[].id |
string |
Mã của phần kiểu. Đây phải là một chuỗi không trống và không có dấu cách. |
style[].label |
string |
Nhãn cho phần kiểu. |
style[].elements |
Array(object) |
Các phần tử kiểu để hiển thị. |
style[].elements[].id |
string |
Mã của phần tử kiểu. Đây phải là một chuỗi không trống không có dấu cách. |
style[].elements[].type |
string enum(StyleElement) |
Loại phần tử kiểu. Ví dụ: bộ chọn phông chữ. |
style[].elements[].label |
string |
Chú giải công cụ hoặc nhãn cho phần tử kiểu. Đây là văn bản nhãn cho phần tử hộp đánh dấu và văn bản chú giải công cụ cho các loại phần tử khác. |
style[].elements[].options |
Array(object) |
options cho phần tử. Giá trị này chỉ hợp lệ cho các loại Phần tử kiểu SELECT_SINGLE và SELECT_RADIO . |
style[].elements[].defaultValue |
string OR object |
Giá trị mặc định cho phần tử kiểu. Các giá trị không hợp lệ sẽ bị bỏ qua.* |
interactions[] |
Array(object) |
Cấu hình tương tác của hình ảnh trực quan. Cấu hình này xác định liệu cấu hình này có thể hoạt động như một bộ lọc hay không. |
interactions[].id |
string |
Mã của phần tử tương tác. Đây phải là một chuỗi không trống và không có dấu cách. |
interactions[].supportedActions |
Array (enum(InteractionType) |
Các tương tác có thể được hỗ trợ |
features |
object |
Các tính năng bạn muốn bật hoặc tắt trong hình ảnh trực quan. |
features.enableComparisonDateRange |
boolean |
Bật phạm vi ngày so sánh. Giá trị mặc định là false nếu không được chỉ định. |
*defaultValue
là một chuỗi cho mọi thành phần ngoại trừ bộ chọn màu. Đối với màu sắc, defaultValue
phải là đối tượng có định dạng:
{
color: `string`
}
DataElement
Giá trị của các phần tử dữ liệu có thể là một trong những giá trị sau:
Giá trị enum | Nội dung mô tả |
---|---|
CHỈ SỐ | Hiển thị phần tử trường chỉ số. |
DIMENSION | Hiển thị một phần tử trường phương diện. |
MAX_RESULTS | Xác định số hàng dữ liệu tối đa mà quá trình đơn giản hoá này có thể yêu cầu |
Tuỳ chọn DataElement
Giá trị của các phần tử dữ liệu có thể là một trong những giá trị sau:
Giá trị enum | Loại tùy chọn | Tuỳ chọn có sẵn |
---|---|---|
CHỈ SỐ | Đối tượng | tối đa: số lượng – số lượng chỉ số tối đa
tối thiểu: số lượng – số lượng chỉ số tối thiểu bắt buộc |
DIMENSION | Đối tượng | max: number – số lượng kích thước tối đa được hỗ trợ.
min: number – số lượng thứ nguyên tối thiểu cần thiết supportedTypes: danh sách các loại được hỗ trợ. supportedTypes có thể bao gồm TIME , GEO hoặc DEFAULT
|
MAX_RESULTS | Đối tượng | max: number – số hàng tối đa mà hình ảnh có thể yêu cầu. Mặc định: 2500 |
StyleElement
Giá trị của các phần tử kiểu có thể là một trong những giá trị sau:
Giá trị enum | Nội dung mô tả | defaultValue Loại dữ liệu (Cấu hình) |
value Loại dữ liệu (Tin nhắn) |
Giá trị mặc định |
---|---|---|---|---|
FONT_COLOR | Hiển thị bộ chọn màu phông chữ. Giá trị hợp lệ là mã màu hex. | STRING | OBJECT<Color> |
STRING | OBJECT<Color> |
Được xác định theo chủ đề. |
FONT_SIZE | Hiển thị bộ chọn kích thước phông chữ. Các giá trị hợp lệ là các pixel sau: 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 | Hiển thị bộ chọn bộ phông chữ. Giá trị hợp lệ là các phông chữ sau: Phông chữ nổi, Roboto. | STRING |
STRING |
Được xác định theo chủ đề. |
HỘP KIỂM | Hiển thị một hộp đánh dấu. | BOOLEAN |
BOOLEAN |
false |
TEXTINPUT | Hiển thị hộp nhập văn bản. | STRING |
STRING |
"" |
KHU VỰC VĂN BẢN | Hiển thị một vùng nhập văn bản lớn. | STRING |
STRING |
"" |
SELECT_SINGLE | Hiển thị trình đơn thả xuống với các giá trị được xác định trước. | STRING (đối với defaultValue, options.label và options.value) |
STRING |
không xác định |
SELECT_RADIO | Hiển thị bộ chọn radio với các giá trị được xác định trước. | STRING (đối với defaultValue, options.label và options.value) |
STRING |
không xác định |
FILL_COLOR | Hiển thị bộ chọn màu nền. Giá trị hợp lệ là các mã màu hex. | STRING | OBJECT<Color> |
OBJECT<Color> |
Được xác định theo chủ đề. |
BORDER_COLOR | Hiển thị bộ chọn màu đường viền. Giá trị hợp lệ là các mã màu hex. | STRING | OBJECT<Color> |
OBJECT<Color> |
Được xác định theo chủ đề. |
AXIS_COLOR | Hiển thị bộ chọn màu trục. Giá trị hợp lệ là các mã màu hex. | STRING | OBJECT<Color> |
OBJECT<Color> |
Được xác định theo chủ đề. |
GRID_COLOR | Hiển thị bộ chọn màu lưới. Giá trị hợp lệ là các mã màu hex. | STRING | OBJECT<Color> |
OBJECT<Color> |
Được xác định theo chủ đề. |
SỰ MỐI NGỮ | Hiển thị bộ chọn độ mờ, đơn vị là %. Giá trị hợp lệ là từ 0 đến 1 theo mỗi bước 0,1 | NUMBER |
NUMBER |
1 |
LINE_WEIGHT | Hiển thị bộ chọn độ đậm của đường kẻ. Các giá trị hợp lệ là từ 0 đến 5. 0 sẽ hiển thị là Không có trong trình đơn thả xuống. | NUMBER |
NUMBER |
|
LINE_STYLE | Hiển thị bộ chọn kiểu đường kẻ. Các giá trị mặc định được chấp nhận: solid , dashed , dotted , double . |
STRING |
STRING |
"solid" |
BORDER_RADIUS | Hiển thị bộ chọn bán kính đường viền. Các giá trị hợp lệ là: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 | NUMBER |
NUMBER |
Được xác định theo chủ đề. |
GẦN GŨI | Hiển thị bộ chọn khoảng thời gian. Giá trị là số nguyên. | NUMBER |
NUMBER |
0 |
Các phần tử kiểu định cấu hình các biểu tượng hiển thị trong thẻ Style
của Bảng điều khiển thuộc tính.
Tuỳ chọn phần tử kiểu
Một số tuỳ chọn hỗ trợ phần tử kiểu
options: array(options)
Giá trị enum | Đối tượng tuỳ chọn |
---|---|
SELECT_SINGLE | { label: `string`, value: `string` } |
SELECT_RADIO | { label: `string`, value: `string` } |
GẦN GŨI | { max: `number`, min: `number` } |
Kiểu dữ liệu
Đối tượng<Màu>
{
color: STRING<Color>,
opacity: NUMBER<Opacity>
}
CHUỖI<Màu>
Giá trị chuỗi chứa mã màu hex.
Ví dụ:
"color": "#0000ff"
NUMBER<Opacity>
Một giá trị số từ 0 đến 1 theo từng bậc 0,10
Ví dụ:
"opacity": 0.2
InteractionType
InteractionTypes định cấu hình các tuỳ chọn tương tác có sẵn trong kiểu Data
của Bảng thuộc tính. Hiện chúng tôi chỉ hỗ trợ giá trị "FILTER"
.
Giá trị enum | Nội dung mô tả |
---|---|
"FILTER" |
Cho phép người dùng sử dụng hình ảnh trực quan làm bộ lọc. |
Cấu hình mẫu
{
"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
}
}