本頁面由 Cloud Translation API 翻譯而成。

社群視覺化設定參考資料

視覺化設定會定義視覺化作業所需的資料和樣式屬性。

設定應以具有下列結構的 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
  }
}