視覺化設定會定義視覺化作業所需的資料和樣式屬性。
設定應以具有下列結構的 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 |
「資料」部分的 ID。這個值必須是不含空格的非空白字串。 |
data[].label |
string |
資料部分的標籤。 |
data[].elements[] |
string |
要轉譯的資料元素。 |
data[].elements[].type |
string 列舉(DataElement) |
要算繪的資料元素類型。 |
data[].elements[].id |
string |
資料元素的 ID。這個值必須是不含空格的非空白字串。 |
data[].elements[].label |
string |
資料元素的工具提示標籤。 |
data[].elements[].options |
object(DataElementOptions) |
元素的資料選項。這取決於資料元素類型。 |
style[] |
Array(object) |
視覺呈現所需的樣式設定。這項設定會影響屬性面板的「Style」窗格。陣列中的每個物件都代表要算繪的樣式元素。元素的順序決定元素的顯示順序。 |
style[].id |
string |
樣式部分的 ID。這個值必須是不含空格的非空白字串。 |
style[].label |
string |
樣式區段的標籤。 |
style[].elements |
Array(object) |
要算繪的樣式元素。 |
style[].elements[].id |
string |
樣式元素的 ID。必須是非空白字串 (不含空格)。 |
style[].elements[].type |
string 列舉(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 |
互動元素的 ID。這個值必須是不含空格的非空白字串。 |
interactions[].supportedActions |
Array (列舉(InteractionType) |
支援的互動方式 |
features |
object |
在視覺呈現中要啟用或停用的功能。 |
features.enableComparisonDateRange |
boolean |
啟用比較日期範圍。如未指定,則預設值為 false 。 |
*defaultValue
是顏色選取器以外的所有字串。如果是顏色,defaultValue
應為下列格式的物件:
{
color: `string`
}
DataElement
資料元素的值可以是下列任一值:
列舉值 | 說明 |
---|---|
指標 | 轉譯指標欄位元素。 |
維度 | 顯示維度欄位元素。 |
MAX_RESULTS | 定義這項虛擬化功能可要求的資料列數上限 |
DataElement 選項
資料元素的值可以是下列任一值:
列舉值 | 選項類型 | 可用選項 |
---|---|---|
指標 | 物件 | 最大值:數字 - 指標數量上限
分鐘:數字 - 所需的指標數量下限 |
維度 | 物件 | max:number - 支援的維度數量上限。
min:數字 - 所需的維度數量下限 支援類型:支援的類型清單。 supportedTypes 可包含 TIME 、GEO 或 DEFAULT |
MAX_RESULTS | 物件 | max: number - 視覺呈現可要求的資料列數量上限。預設:2500 |
StyleElement
樣式元素的值可以是下列任一項:
列舉值 | 說明 | defaultValue 資料類型 (Config) |
value 資料類型 (訊息) |
預設值 |
---|---|---|---|---|
FONT_COLOR | 算繪字型顏色選取器。有效的值為十六進位顏色代碼。 | 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 | 顯示字型系列選取器。有效值包括:Font、Boogaloo、Bubblegum Sans、Chwy、Comic Sans MS、Up Soon、Cormorant Unicase、Courier New、Droid、Droid Sans、Eater、Georgia、Google Sans、Great Vibes、Indie Flower、Lato、Lora、Montrons 和 Ubuntu。 | STRING |
STRING |
取決於主題。 |
CheckBOX | 顯示核取方塊。 | BOOLEAN |
BOOLEAN |
false |
文字輸入內容 | 轉譯文字輸入框。 | 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 | 顯示填滿顏色選取器。有效的值為十六進位顏色代碼。 | STRING | OBJECT<Color> |
OBJECT<Color> |
取決於主題。 |
BORDER_COLOR | 顯示邊框顏色選取器。有效的值為十六進位顏色代碼。 | STRING | OBJECT<Color> |
OBJECT<Color> |
取決於主題。 |
AXIS_COLOR | 顯示軸顏色選取器。有效的值為十六進位顏色代碼。 | STRING | OBJECT<Color> |
OBJECT<Color> |
取決於主題。 |
GRID_COLOR | 算繪格線顏色選取器。有效的值為十六進位顏色代碼。 | 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)
列舉值 | 選項物件 |
---|---|
SELECT_SINGLE | { label: `string`, value: `string` } |
SELECT_RADIO | { label: `string`, value: `string` } |
間隔 | { max: `number`, min: `number` } |
資料類型
物件<顏色>
{
color: STRING<Color>,
opacity: NUMBER<Opacity>
}
STRING<顏色>
包含十六進位顏色代碼的字串值。
範例
"color": "#0000ff"
NUMBER<Opacity>
介於 0 到 1 之間的數值,以 0.10 為單位遞增
範例
"opacity": 0.2
InteractionType
InteractionTypes 會設定「屬性」面板的 Data
樣式中提供的互動選項。目前僅支援 "FILTER"
。
列舉值 | 說明 |
---|---|
"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
}
}