Tài liệu tham khảo về cấu hình hình ảnh trực quan cộng đồng

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