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 hình ảnh xác định các thuộc tính kiểu và dữ liệu mà một trực quan.

Cấu hình dự kiến là 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 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 Data (Dữ liệu) của bảng điều khiển thuộc tính.
data[].id string Mã của mục dữ liệu. Đây phải là một chuỗi không trống và không có khoảng trắng.
data[].label string Nhãn cho phần dữ liệu.
data[].elements[] string Các phần tử dữ liệu cần hiển thị.
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ó khoảng trắng.
data[].elements[].label string Nhãn chú thích cho phần tử dữ liệu.
data[].elements[].options object(DataElementOptions) 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 mà hình ảnh trực quan yêu cầu. Cấu hình này ảnh hưởng đến ngăn Style (Kiểu) của bảng điều khiển thuộc tính. Mỗi đối tượng trong mảng đại diện cho một phần tử kiểu để kết xuất. Thứ tự của các phần tử sẽ quyết định thứ tự hiển thị của các phần tử đó.
style[].id string Mã nhận dạng của phần kiểu. Đây phải là một chuỗi không trống và không có khoảng trắng.
style[].label string Nhãn cho phần kiểu.
style[].elements Array(object) Các phần tử kiểu sẽ hiển thị.
style[].elements[].id string Mã nhận dạng của phần tử kiểu. Đây phải là một chuỗi không trống và không có khoảng trắng.
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ú thích hoặc nhãn cho phần tử kiểu. Đây là văn bản nhãn cho một thành phần hộp đánh dấu và văn bản chú thích cho các loại thành phần khác.
style[].elements[].options Array(object) options cho phần tử. Hàm 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 lượt tương tác của hình ảnh trực quan. Cấu hình này xác định liệu nó 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ó khoảng trắng.
interactions[].supportedActions Array (enum(InteractionType) Các tương tác có thể có đượ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 tính năng phạm vi ngày so sánh. Giá trị mặc định là false nếu bạn không chỉ định.

*defaultValue là một chuỗi cho mọi nội dung ngoại trừ bộ chọn màu. Cho màu, thì defaultValue phải là một đối tượng của định dạng:

{
    color: `string`
}

DataElement

Giá trị cho các phần tử dữ liệu có thể là một trong các giá trị sau:

Giá trị enum Mô tả
SỐ LIỆU Hiển thị phần tử trường chỉ số.
DIMENSION Hiển thị phần tử trường phương diện.
MAX_RESULTS Xác định số hàng dữ liệu tối đa có thể được yêu cầu theo bản trực quan này

Tuỳ chọn DataElement

Giá trị cho các phần tử dữ liệu có thể là một trong các giá trị sau:

Giá trị enum Loại lựa chọn Có các lựa chọn
SỐ LIỆU Đối tượng max: number - số lượng chỉ số tối đa
tối thiểu: số – số lượng chỉ số tối thiểu bắt buộc
DIMENSION Đối tượng max: number: số lượng phương diện tối đa được hỗ trợ.
tối thiểu: số – số lượng kích thước tối thiểu bắt buộc
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ố lượng hàng tối đa mà hình ảnh trực quan có thể yêu cầu. Mặc định: 2500

StyleElement

Giá trị cho các phần tử kiểu có thể là một trong các giá trị sau:

Giá trị enum 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 giao diện.
FONT_SIZE Hiển thị bộ chọn kích thước phông chữ. 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: WebP, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, Sắp ra mắt, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Indie Hoa, Lato, Lora, Montserrat, Oleo Script, Open Sans, Orbitron, Osb STRING STRING Được xác định theo giao diện.
CHECKBOX Hiển thị một hộp đánh dấu. BOOLEAN BOOLEAN false
TEXTINPUT Hiển thị ô nhập văn bản. STRING STRING ""
TEXTAREA Hiển thị một vùng nhập văn bản lớn. STRING STRING ""
SELECT_SINGLE Hiển thị một trình đơn thả xuống có các giá trị được xác định trước. STRING (đối với defaultValue và options.label và options.value) STRING chưa xác định
SELECT_RADIO Hiển thị bộ chọn nút chọn với các giá trị được xác định trước. STRING (đối với defaultValue và options.label và options.value) STRING chưa xác định
FILL_COLOR Hiển thị bộ chọn màu nền. Giá trị hợp lệ là mã màu hex. STRING | OBJECT<Color> OBJECT<Color> Được xác định theo giao diện.
BORDER_COLOR Hiển thị bộ chọn màu đường viền. Giá trị hợp lệ là mã màu hex. STRING | OBJECT<Color> OBJECT<Color> Được xác định theo giao diện.
AXIS_COLOR Hiển thị bộ chọn màu trục. Giá trị hợp lệ là mã màu hex. STRING | OBJECT<Color> OBJECT<Color> Được xác định theo giao diện.
GRID_COLOR Hiển thị bộ chọn màu lưới. Giá trị hợp lệ là mã màu hex. STRING | OBJECT<Color> OBJECT<Color> Được xác định theo giao diện.
DỊCH TÍNH Hiển thị bộ chọn độ mờ, đơn vị là %. Các giá trị hợp lệ là từ 0 đến 1 với gia số 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ị thành Không có trong trình đơn thả xuống. NUMBER NUMBER
LINE_STYLE Hiển thị bộ chọn kiểu đường kẻ. 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. 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 giao diện.
KHOẢNG THỜI GIAN 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 Thuộc tính Bảng điều khiển.

Tùy chọn phần tử kiểu

Một số tuỳ chọn hỗ trợ cho 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`
        }
KHOẢNG THỜI GIAN 
        {
            max: `number`,
            min: `number`
        }

Kiểu dữ liệu

Đối tượng<Màu>

{
  color: STRING<Color>,
  opacity: NUMBER<Opacity>
}

STRING&lt;Color&gt;

Một giá trị chuỗi chứa mã màu hex.

Ví dụ:

"color": "#0000ff"

NUMBER<Độ mờ>

Một giá trị số từ 0 đến 1 với gia số 0,10

Ví dụ:

"opacity": 0.2

InteractionType

Tương tác loại định cấu hình các tuỳ chọn tương tác có sẵn theo kiểu Data của Bảng thuộc tính. Hiện tại, chúng tôi chỉ hỗ trợ "FILTER".

Giá trị enum 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
  }
}